State, Props

Hayoung LEE·2020년 12월 12일

React

wecode

목록 보기

4/5

1. props

부모 컴포넌트가 자식 컴포넌트에게 주는 데이터

부모가 특정 값을 자식 컴포넌트에게 보내 사용하고 싶을때 씁니다.
자식은 props를 받아오는 것만 가능하고 자식에서 props를 수정할 수는 없습니다.

부모

부모 컴포넌트는 최상단에 import 자식이름 from '경로' 라고 써 자식컴포넌트를 import 해줍니다.
그 후 함수 안에 자식 컴포넌트의 이름을 태그로 써줍니다. <자식이름 />
그리고 그 태그 안에 전달해주고 싶은 props값을 정의합니다!
<자식이름 name="철수" />

자식

자식은 따로 부모를 import 해줄 필요가 없습니다.
함수의 파라미터를 props로 써주고 그 안에 {props.name} 이런 식으로 부모가 정의해준 props값을 사용할 수 있습니다.
<div>저는 자식이고 제 이름은 {props.name} 입니다.</div>

2. state

해당 컴포넌트 내부에서 만들고 쓸 수 있는 데이터

주로 동적으로 변하는 데이터를 만들고 싶을 때 state를 사용합니다.
state에 저장되는 데이터는 객체 형태입니다. 이 객체 안에는 배열도 들어갈 수 있고 함수도 들어갈 수 있습니다.
state = { name: "철수"}

setState()

state를 업데이트 하는 것

리액트에서 state를 변경할 때는 반드시 setState 메소드를 사용해줘야 합니다.
그렇지 않고 this.state = 철구 이런 식으로 데이터를 바꿔주려고 하면 리액트는 인지하지 못합니다.
this.setState({this.state.name: "철구"})
이렇게 setState를 사용해 변경해주어야 합니다.

이 때, class형 컴포넌트와 function형 컴포넌트는 setState를 약간 다르게 씁니다.

class형 컴포넌트

class ThisIsSon extends Component {
  constructor() {
    super();
    this.state = {
      name: "철수"
    };
  }

  nameChanging = () => {
    const { name } = this.state;
    this.setState({
      name: "철구"
    });
  };

이 코드에서 중요 포인트를 정리하려 합니다.

1. state 초기화

state는 초기값이 null이기 때문에 반드시 초기화를 해줘야 합니다. 이 때 constructor()를 사용하고 하단에 super를 사용합니다.

2. 구조분해 할당

구조분해 할당은 구조를 분해하여 그 값을 개별 변수에 저장하는 것입니다.
매번 this.state.name 이렇게 써주기 불편하다면? 구조분해 할당을 통해 name만 써도 this.state.name이라는 것을 인지하게 만들어주는 것이죠.
const { name } = this.state;
리액트에서는 이런 식으로 구조분해 할당을 할 수 있습니다.