React Props & State

리액트에서 데이터를 다루는 방식에는 props, state 두 가지 방법이 있다.
(JSX 문법, SPA, React Router의 사전 지식이 필요하다)

 

State는 살면서 변할수 있는 값 ( 후에 변할 수 있는값 )  => 컴포넌트 사용 중 컴포넌트 내부에서 변하는 값을 의미

Props는 외부에서 즉 가장 가까운 부모함수에게서 받은 값을 의미한다.

ex) State 값 : 나이, 사는 곳, 결혼/연애 여부, 취업여부  => on/off 여부, count 숫자 값 (컴포넌트 내부)

      Props값 : 이름, 성별

 

읽기 전용 객체가 아니라면 props를 전달받은 하위 컴포넌트 내에서 props를 직접 수정 시 props를 전달한 상위 컴포넌트의 값에 영향을 미칠 수 있게 됩니다. 즉, 개발자가 의도하지 않은 side effect가 생기게 되고 이는 React의 단방향, 하향식 데이터 흐름 원칙(React is all about one-way data flow down the component hierarchy)에 위배됩니다.

Props 사용 방법 3단계

1. 하위컴포넌트에 보내줄 data의 Key와 Value를 부모컴포넌트 내부의 하부컴포넌트 안쪽에 설정한다.

2. props구조를 사용해서 정의된 객체를 자식 컴포넌트에 전달 인자로 전달한다.

3. 전달받은 props를 렌더링 한다.

React에서 속성 및 값을 할당하는 방법도 이와 유사합니다. 다만, 전달하고자 하는 값을 중괄호 {}를 이용하여 감싸주면 됩니다.

<Child attribute={value} />