State.md

📍 애플리케이션에서 상태가 가지는 의미

• 상태관리를 통해서 유저에게 올바른 데이터를 보여줄 수 있습니다.
• 유저가 입력한 값이나, 서버로부터 받아오는 데이터들을 상태로써 관리하여 어플리케이션이 정상동작하게 만들 수 있습니다.

📍 바닐라 자바스크립트와 리액트에서 상태 차이

• 바닐라 자바스크립트에서는 상태가 변하면, 명시적으로 innerHTML, 이나 createElement 메서드를 실행하여 변화된 상태를 직접 DOM에 반영해주어야 했습니다.
• 리액트에서는 state 가 변화되면, 즉 setState 함수가 실행되면 컴포넌트의 리렌더링이 일어나서, 변경된 상태가 DOM 에 반영된다. 즉 선언적으로 state 변경이 view 에 반영 됩니다.

📍 setState 가 해주는 일

• 컴포넌트의 state 객체에 대한 업데이트를 실행합니다.
• state 가 업데이트되면 컴포넌트가 리렌더링 되어 변경된 상태가 view 에 반영 됩니다.

📍 state 와 props 의 공통점

• props 와 state 모두 자바스크립트 일반 객체입니다.
• 두 객체 모두 렌더링 결과물에 영향을 주는 정보를 가지고 있습니다.

📍 state 와 props 의 차이점

props

• props 는 마치 함수의 매개변수 처럼 컴포넌트에 전달 됩니다.
• props 는 불변하기 때문에, 사용하는 컴포넌트에서 수정 할 수 없습니다.
• Props 는 (함수의 매개변수 처럼) 컴포넌트에 전달됩니다.

state

• State 는 (함수 내에 선언된 변수 처럼) 컴포넌트 안에서 관리됩니다.
• 부모 컴포넌트나 자식 컴포넌트에서 State 에 직접적으로 접근/변경이 불가능하므로 private 합니다.

📍 setState 에 객체를 전달하는 것과 함수를 전달하는 것의 차이점

• updater 함수를 전달하면 함수 안에서 이전 state 값에 접근 할 수 있습니다.
• setState 호출은 비동기 + 배치 처리 되기 때문에 현재의 this.state 로 접근할 경우 변경이 반영되지 않을 수 있습니다.

📍 State 는 아래로 흐른다.

• 컴포넌트는 자신의 state 를 자식 컴포넌트에 props 로 전달 할 수 있습니다.
• 부모 컴포넌트로부터 props 를 내려받는 자식컴포넌트는 해당 props 가 부모컴포넌트의 state 인지, props 인지, 수동으로 입력된 값인지 알 수 없습니다.
• 즉 “단방향식” 혹은 “탑다운” 데이터 흐름을 유지합니다.

참고자료

https://ko.reactjs.org/docs/react-component.html#setstate