1. state
javascript에서는 변수에 데이터를 담는다.
React에서는 state에 데이터를 담아 사용한다.
그렇다면 React는 왜 javascript의(let aaa = "000") 처럼 변수에 데이터를 담지 않고 굳이 state라는 곳에 넣는 것일까?
React는 컴포넌트는 앞쪽(화면에 보여지는 부분)과 뒷쪽(데이터를 관리하는 부분)으로 나눌 수 있다.
만약, 단순히 javascript의 let이나 const 변수를 사용해서 다음 사진의 좋아요를 증가시킨다고 했을 때
화면의 뒷쪽의 데이터에만 변경되고, 앞쪽 화면에는 반영이 되지 않는다.
하지만 컴포넌트 변수 state를 사용해서 화면에 그리고, setState()를 사용해서 좋아요를 변경하면,
setState() 안에서 화면을 새롭게 그리라는 명령이 실행되어 변경된 데이터가 화면에 새로 그려진다.
state
state는 컴포넌트가 마운트되면 기본값에서 시작하여 처음 설정한 기본 값에서 값의 변화를 겪을 때마다
snapshot한다.
snapshot은 특정 시간에 데이터 저장 장치의 상태를 별도로 기록해 두는 것이다.
컴포넌트는 자신의 내부 state만 관리할 수 있다.
setState()는 컴포넌트의 state 객체에 대한 업데이트를 실행한다.
setState()는 state의 객체에 대한 업데이트를 실행하는 함수이다.
여기서 state의 객체에 snapshot으로 기록한 데이터 중 변화가 일어난 부분만 렌더링해준다.
state: 컴포넌트에서 사용하는 변수
setState: 컴포넌트에서 사용하는 변수를 바꿔주는 기능
useState: 컴포넌트에서 사용하는 변수를 만들어 주는 기능
setState()를 사용할 때 주의사항
const onClickFunction = () => {
setState(count + 1);
setState(count + 1);
setState(count + 1);
}혹자는 위의 onClickFunction 함수가 실행되면 count가 3 증가할 것이라 생각할 수도 있다.
허나 setState는 이벤트 핸들러 내에서 비동기적으로 작동하기 때문에
하나의 클릭 이벤트에서 setState()를 여러번 수행하도록 코드를 작성하여도
브라우저에서 이벤트가 끝날 시점에 state를 일괄적으로 업데이트하기 때문에 setState()는 한번만 수행되어
count는 1만 증가하게 된다.
setState를 즉시 수행하지 않는 이유.
- props와 state 사이의 일관성을 해칠 수 있으며 이것은 디버깅하기 매우 힘든 이슈를 일으킬 수 있다.
- 현재 작업 중인 새로운 기능들을 구현하기 힘들게 만들 수 있다.
쉽게 말하자면 불필요한 렌더링을 방지하면서 성능을 향상시키기 위해 setState는 즉시 수행하지 않는다.
state, setState, useState는 언제 사용되는가
- 회원가입, 게시물 작성 내용 등을 서버컴퓨터에 전송하기위해 변수에 담아둘 때 사용한다.
- 작성한 내용을 검증하고 잘못된 부분을 빨간색으로 표기 할 때 사용한다.
props와 state는 일반 Javscript 객체로 두 객체 모두 렌더링 결과물에 영향을 주는 정보를 가지고 있다.
단, props는 함수 매개변수처럼 컴포넌트에 전달되는 반면 state는 컴포넌트 안에서 관리되어진다.
2. props
컴포넌트를 2개로 나누면 2개의 컴포넌트 간의 데이터와 기능의 연결고리가 끊어지게 된다.
이를 연결해 주는 것이 props이며 props는 부모가 가지고 있는 변수, 함수를 자식한테 물려준다.
또한 부모 컴포넌트가 props를 물려줄때는 객체로 묶어서 넘긴다.
위와 같이 props를 넘기면 자식 컴포넌트에서는 props.handleChangeWriter 으로 호출할 수 있다.
이는 props가 객체로 넘어가기 때문에 props라는 객체의 handleChangeWriter를 할당하는 방식으로 동작한다.
