React 다루기

Props와 State

 

Props 사용하는 방법

부모 컴포넌트가 자식 컴포넌트에 값을 전달하기 위해 사용. 읽기전용으로 사용 (중요*)

예제)
자식 컴포넌트( 부모로부터 name을 받아 보여줌 )

class MyName extends Component {
  render() {
    return (
      <div>
        안녕하세요! 제 이름은 <b>{this.props.name}</b> 입니다.
      </div>
    );
  }
}

 

부모 컴포넌트 (자식 컴포넌트에 name 전달)

class App extends Component {
  render() {
    return (
      <MyName name="리액트" />
    );
  }
}

 

 

기본값 props 사용하기 (defaultProps)
부모에서 name을 전달을 생략해도 '기본이름'이 나타나게 됨

class MyName extends Component {
  static defaultProps = {
    name: '기본이름'
  }
  render() {
    return (
      <div>
        안녕하세요! 제 이름은 <b>{this.props.name}</b> 입니다.
      </div>
    );
  }
}

 

 

함수형 컴포넌트 - 클래스형 컴포넌트 보다 더 간단하게 작성

import React from 'react'; // { Component } 불러오지 않아도 됨.

const MyName = ({ name }) => {
  return (
    <div>
      안녕하세요! 제 이름은 {name} 입니다.
    </div>
  );
};

export default MyName;

함수형 컴포넌트와 클래스형 컴포넌트와의 차이점은 LifeCycle 과 state의 유무
성능적으론 함수형이 좀더 빠르나 미세한 차이

단순 보여주는 용도이면 함수형을 추천

 

 

State를 사용하는 방법

state는 부모가 자삭한테 값을 주는것이 아닌 자식이 이미 가지고 있음
변화가 필요할때 setState를 통해 값을 설정한다.(쓰기가능)

ex) counter

import React, { Component } from 'react';

class Counter extends Component {
  state = {
    number: 0
  }

  handleIncrease = () => {
    // this.state.number =  this.state.number+1 사용 X (state에서 업데이트 여부 확인불가)
    this.setState({
      number: this.state.number + 1
    });
  }

  handleDecrease = () => {
    this.setState({
      number: this.state.number - 1
    });
  }

  render() {
    return (
      <div>
        <h1>카운터</h1>
        <div>값: {this.state.number}</div>
        <button onClick={this.handleIncrease}>+</button>
        <button onClick={this.handleDecrease}>-</button>
      </div>
    );
  }
}

export default Counter;

 

 

LifeCycle API

생명주기 (나타날때, 업데이트할때, 사라질때)

https://twitter.com/dan_abramov/status/981712092611989509

constructor	React 컴포넌트의 생성자는 해당 컴포넌트가 마운트되기 전에 호출
componentDidMount	컴포넌트가 마운트된 직후, 즉 트리에 삽입된 직후에 호출 DOM 을 사용해야하는 외부 라이브러리 연동하거나, 필요 서버 데이터 호출(ajax), DOM 속성을 읽거나 직접 변경시 사용.
getDerivedStateFromProps	state 가 props 에 따라 변해야 하는 로직을 작성
shouldComponentUpdate	컴포넌트를 최적화하는 작업에서 매우 유용 Virtual DOM 에 리렌더링 하는것도, 불필요할경우엔 방지하기 위함.
getSnapshotBeforeUpdate	DOM 변화가 일어나기 직전의 DOM 상태를 가져옴
componentDidUpdate	컴포넌트에서 render() 를 호출하고난 다음에 발생
componentWillUnmount	주로 등록했었던 이벤트를 제거

 

예제 코드

class App extends Component {
  state = {
    counter: 1
  };

  constructor(props) {
    super(props);
    console.log('constructor');
  }

  componentDidMount() {
    console.log('componentDidMount');
  }

  handleClick = () => {
    this.setState({
      counter: this.state.counter + 1
    });
  };

  render() {
    return (
      <div>
        {this.state.counter < 10 && <MyComponent value={this.state.counter} />}
        <button onClick={this.handleClick}>Click Me</button>
      </div>
    );
  }
}

 

 

이글은 아래 강의를 보고 간단히 정리한 글입니다.
강의를 수강하시면 보다 상세한 정보를 얻으실 수 있습니다.

참조 : 누구든지 하는 리액트: 초심자를 위한 react 핵심 강좌 - velopert(김 민준) (인프런)
참고문서 : https://react-anyone.vlpt.us/03.html