React state, props

리액트 컴포넌트에서 데이터를 다루기 위한 객체
state & props에 대해 알아보자!

State란

리액트 컴포넌트에서 데이터를 담기위한 상자이다.
즉 스테이트는 컴포넌트에서 사용하는 변수이다.

setState 작동 원리

자바스크립트에서 변수 만들기 & 변수 바꾸기

const fruit = "apple"
fruit = "lemon"

리액트 컴포넌트에서 변수 만들기 & 변수 바꾸기

const [fruit, setFruit] = useState("apple")
setFruit("lemon")

리액트에서 let 또는 const가 아닌 state를 변수로 사용하는 이유는,
화면 뒷쪽의 데이터가 변경되었을때 setState()를 사용해 화면 앞쪽에도 그대로 반영되도록 하기 위함이다.

setState는 비동기로 작동하기 때문에 임시저장소에 대기하고 있다가 state 값이 변경되면 한번에 렌더링한다.
(useState를 동기적으로 처리하려면 useEffect 의존성배열 또는 함수를 인자로 넣으면 된다.)

React-Hooks

리액트에서 함수형 컴포넌트에서도 클래스형 컴포넌트와 동일한 기능 사용을 가능하도록 도와주는 도구를 훅이라고 한다.

state : 컴포넌트에서 사용하는 변수
setState : 컴포넌트에서 사용하는 변수를 바꿔주는 기능
useState : 컴포넌트에서 사용하는 변수를 만들어주는 기능

props

props(properties)는 어떤 값을 부모 컴포넌트에서 자식 컴포넌트에 전달해줘야할 때 사용한다.

props는 함수의 매개 변수처럼 컴포넌트에 전달된다면,
state는 함수 내에 선언된 변수처럼 컴포넌트 작동된다.