밍부스23) state와 props에 관해서

minji jeon·2022년 7월 31일
0

TIL_

목록 보기
40/61
post-thumbnail

일주일에 한번씩 오는 wil을 쓰는 날이 3일에 한번씩 돌아오는 느낌이다.
그만큼 시간이 빨리가는 건가...
또왔네 또왔어 wil이노무자식

state란 무엇일까

State는 일반적으로 컴포넌트의 내부에서 변경 가능한 데이터를 관리해야할 때에 사용 한다.

프로퍼티(props)의 특징은 컴포넌트 내부에서 값을 바꿀 수 없다는 것이었다.
하지만 값을 바꿔야 하는 경우도 분명 존재하며, 이럴 때 state라는 것을 사용한다. 
값을 저장하거나 변경할 수 있는 객체로 보통 이벤트와 함께 사용된다. 
컴포넌트에서 동적인 값을 상태(state)라고 부르며, 동적인 데이터를 다룰 때 사용된다 볼 수 있다.

그렇다면
props는 무엇일까?
props란 properties 의 줄임말로, 우리가 어떠한 값을 컴포넌트에 전달해 주어야 할때 사용한다.
props는 부모 컴포넌트가 자식 컴포넌트에게 값을 전달해줄때 사용된다.

props 사용방법은 <컴포넌트이름 props이름 = “값”> 이렇게 상위 컴포넌트에서 HTML의 attribute를 정의하듯이 하위 컴포넌트의 속성처럼 사용하면 된다.

props를 정의하면 하위 컴포넌트에서 {props파라미터.props이름} 으로 사용할 수 있다.

리액트에서 리렌더링 조건은 무엇일까?

  1. Props가 변경될 때

Props 업데이트가 일어나면 리렌더링을 한다.
Props가 변경되는 건 부모 컴포넌트의 State도 변경이 일어난다는 의미이다.

부모 컴포넌트의 State 변경이 발생하면 Props도 업데이트 되고,
모든 하위 컴포넌트에 대해 리렌더링이 발생한다.

  1. State가 변경될 때

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

리액트에서 State 값이 변경되면 관련 컴포넌트들을 전부 리렌더링 한다.
리액트는 변화를 바로바로 감지하여 화면에 변경사항을 보여주기 때문이다.

  1. 부모 Component가 렌더링 될 때

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

profile
은행을 뛰쳐나와 Deep Dive in javascript

0개의 댓글