React state, props

state

state는 리액트에서 자바스크립트에 변수로 사용이된다.
자바스크립트에서는 변수에 데이터를 담아 사용하지만 리액트에서는 state를 사용해 데이터를 담아 사용한다.

setState는 state 객체에 대한 업데이트를 실행한다.
state가 변경되면 컴포넌트는 리렌더링 된다.
props 와 state 두 객체 모두 렌더링 결과물에 영향을 주는 정보를 가지고 있는데, 한 가지 중요한 방식에서 차이가 있다.
props는 컴포넌트에 전달되는 반면 state는 (함수 내에 선언된 변수처럼) 컴포넌트 안에서 관리된다.

setState는 이벤트 핸들러 내에서 비동기적이다.
이로 인해 부모와 자식이 모두 click 이벤트에서 setState를 호출한다면 자식은 두 번 렌더링되지 않는다. 대신 React는 브라우저 이벤트가 끝날 시점에 state를 일괄적으로 업데이트한다.

setState가 비동기적인 이유

• props와 state 사이의 일관성을 해칠 수 있으며 이것은 디버깅하기 매우 힘든 이슈를 일으킬 수 있기 때문이다.
• 현재 작업 중인 새로운 기능들을 구현하기 힘들게 만들 수 있기 때문이다.

  ---

props

props는 부모 컴포넌트가 자식 컴포넌트에 값을 전달할 때 사용하는 것이다.
폴더구조를 나누게 되면 자식 컴포넌트에서 사용되는 함수와 부모 컴포넌트에 기능 부분에 연결이 끊어지게 된다.
이때 props를 사용하여 부모가 가지고 있는 변수, 함수를 객체로 묶어 자식한테 보내준다.
아래와 같이 매개변수로 주어 props를 사용할 수 있다.