7월 4주차 WIL - 리액트 State, Props, 리렌더링 발생조건

State

컴포넌트 내부에서 변경될 수 있는 값이다.

리액트에 존재하는 state의 종류는 2가지다.

• 클래스형 컴포넌트가 가지고 있는 state
• 함수형 컴포넌트가 useState라는 함수로 사용하는 state

컴포넌트 내부에서 변경하고 싶은 값이 있을 때, state를 활용하면 된다.

 

클래스형 컴포넌트의 state

state의 초기값을 설정할 때 constructor 메서드를 사용하지 않고도 아래와 같이 간편하게 설정할 수 있다.

this.setState 함수 사용 시, 인자로 객체 대신 함수를 넘겨줄 수도 있다.

setState로 state의 값을 변경한 다음, 다른 특정한 작업을 하고자 할 때에는 setState의 두 번째 파라미터에 콜백 함수(callback function)를 등록하면 된다.

 

함수형 컴포넌트의 state - useState의 사용

state의 값을 변경할 때에는, 클래스형 컴포넌트일 경우 this.setState 함수를, 함수형 컴포넌트일 경우 useState 함수만을 사용하는 것이 중요한 포인트다.

 

Props

프로퍼티, props(properties의 줄임말) 라고 한다. 
상위 컴포넌트가 하위 컴포넌트에 값을 전달할때 사용한다.(단방향 데이터 흐름 갖는다.) 
프로퍼티는 수정할 수 없다는 특징이 있다.(자식입장에선 읽기 전용인 데이터이다.)

프로퍼티에 문자열을 전달할 때는 큰따옴표(" ")를, 문자열 외의 값을 전달할 때는 중괄호({ })를 사용 한다. 

 

 

 

 

state와 props의 차이점

props (“properties”의 줄임말) 와 state 는 일반 JavaScript 객체다.

두 객체 모두 렌더링 결과물에 영향을 주는 정보를 갖고 있는데, 한 가지 중요한 방식에서 차이가 있다. 

props는 (함수 매개변수처럼) 컴포넌트에 전달되는 반면,

state는 (함수 내에 선언된 변수처럼) 컴포넌트 안에서 관리된다.

• props와 state 모두 컴포넌트에서 사용 혹은 렌더링할 데이터를 담고 있다.
• props는 부모 컴포넌트 쪽에서 설정해 주는 것이다. 컴포넌트 자신이 변경할 수 없다.
• 반면 state는 컴포넌트 자신이 직접 가지고 있는 값이고, 그 값의 변경도 내부에서 가능하다.

 

대표적인 3가지 리렌더링 조건

1. Props 변경 (=> properties의 줄임말)

Props 업데이트가 일어나면 리렌더링을 한다.

Props가 변경되는 건 부모 컴포넌트의 State도 변경이 일어난다는 의미이다.

부모 컴포넌트의 State 변경이 발생하면 Props도 업데이트되고,

모든 하위 컴포넌트에 대해 리렌더링이 발생한다.

2. State 변경

State 업데이트가 일어나면 리렌더링을 한다.

리액트에서 State 값이 변경되면 관련 컴포넌트들을 전부 리렌더링 한다.

리액트는 변화를 바로바로 감지하여 화면에 변경사항을 보여주기 때문이다.

3. 부모 컴포넌트 렌더링

부모 컴포넌트가 렌더링을 하면 그 자식 컴포넌트들은 모두 리렌더링 한다.

Props와 같은 원리이다.

 

 

 

---

<출처>

https://velog.io/@hidaehyunlee/React-State-%EB%9E%80

https://tooo1.tistory.com/580

https://ko.reactjs.org/docs/faq-state.html

https://goddaehee.tistory.com/300