state란?
- 일반적으로 컴포넌트의 내부에서 변경 가능한 데이터를 관리해야할 때에 사용 한다.
- 프로퍼티(props)의 특징은 컴포넌트 내부에서 값을 바꿀 수 없다는 것이었다.
- 하지만 값을 바꿔야 하는 경우도 분명 존재하며, 이럴때 state라는 것을 사용한다.
- 값을 저장하거나 변경할 수 있는 객체로 보통 이벤트와 함께 사용된다.
- 컴포넌트에서 동적인 값을 상태(state)라고 부르며, 동적인 데이터를 다룰 때 사용된다 볼 수 있다.
사용방법
const [state, setState] = useState(initialState);
const [ 데이터, 데이터변경함수 ] = useState(초기값(생략가능));setState는 어떤 일을 하나요?
setState()는 컴포넌트의 state 객체에 대한 업데이트를 실행합니다. state가 변경되면, 컴포넌트는 리렌더링됩니다.
프로퍼티(props)란?
- 프로퍼티, props(properties의 줄임말) 라고 한다. - 상위 컴포넌트가 하위 컴포넌트에 값을 전달할때 사용한다.(단방향 데이터 흐름 갖는다.) - 프로퍼티는 수정할 수 없다는 특징이 있다.(자식입장에선 읽기 전용인 데이터이다.)
사용방법
- 프로퍼티에 문자열을 전달할 때는 큰따옴표(" ")를, 문자열 외의 값을 전달할 때는 중괄호({ })를 사용 한다.
state와 props의 차이점은 무엇인가요?
props와 state 는 일반 JavaScript 객체입니다. 두 객체 모두 렌더링 결과물에 영향을 주는 정보를 갖고 있는데, 한 가지 중요한 방식에서 차이가 있습니다. props는 (함수 매개변수처럼) 컴포넌트에 전달되는 반면 state는 (함수 내에 선언된 변수처럼) 컴포넌트 안에서 관리됩니다.
리렌더링 조건
-
부모 컴포넌트 렌더링
부모 컴포넌트가 렌더링되면 자식 컴포넌트들 모두 리렌더링된다.
그래서 코드양이 많아지면 렌더링량 또한 많아지게 되므로 최적화가 필수적이다. -
state 변경
리액트는 상태를 사용해서 동적인 데이터를 저장한다.
리액트는 이 상태의 변경이 감지되면 리렌더링을 해주게 된다.
하지만 setState로 바꿔주는게 아닌 직접 변경을 하게 되면 리액트는 이를 감지하지 못한다. -
새로운 props
전달받은 props가 변경됬다면 리렌더링된다.
이번주 배운것
라우터
리덕스
usememo, usecallback
styled components
내게 아쉬웠던 점
열심히 배우고자 하는 의지가 점점 흐려지고 있다.
다시 목표를 되새기며 의지를 살려야겠다.
코드리뷰받은것(state로 하는 것과, ref를 써서 관리하는 것 둘 중에 어느 것이 성능에 더 유리할지?) 더 고민해 보고 싶다.
