state 와 props 의 차이

Seungmin Shin·2022년 3월 1일
1

React 안에서의 state 와 props

우리가 리액트로 작업을 하면서 사용하게 되는 state와 props, 이 둘의 차이점을 알아보기전에
이 둘의 개념을 먼저 잡고 넘어가자. 그렇게 된다면 둘의 차이는 자연스럽게 알게 될것이다.

state란?

state는 말 그대로 "상태" 의 의미를 가진다. 컴포넌트 단위의 작업을 할때 그 내부에서 선언되는 값들을
말한다. 예를 들면 사용자 로그인상태, 사용자가 체크한값, 좋아요를 누른 횟수 등등 컴포넌트 내부에서
변경가능한 값을 상태로 저장할 수 있다. 여기서 그 특징이 나온다. 상태는 "변경가능" 하다.
react hooks 덕분이다. 우리는 useState 로 상태를 변경할 수 있게되었다.

props란?

props는 Properties 의 줄임말로, 부모컴포넌트에서 자식컴포넌트로 상속하는 객체를 의미한다.
그리고 상속받은 객체는 읽기전용이 된다. 그렇다는것은 props 는 수정할 수 없다는것이다. 수정하기 위해서는
상속을 한 부모컴포넌트에서 수정을 해야한다.

state 와 props 의 차이

state는 각각의 컴포넌트 내부에서 독립적으로 생성되어 사용되는 요소이기때문에 다른 컴포넌트 간의 접근을
고려하지 않아도 된다. 물론 상속과 redux 등을 이용해서 다른 컴포넌트간의 사용이 가능하기도 하다. 하지만
기본적인 개념은 이렇다. 그런데 props는 그 특성자체가 부모에서 자식컴포넌트로 상속하여 발생하는 개념이라
state와는 생성되고 사용되는 위치에 따른 차이점이 생긴다.

그리고 state는 react hooks, useState 를 통해서 수정이 가능하다. props 도 물론 상속을 한 부모 컴포넌트 안에서는 수정을하여 다시 전달할 수는 있겠지만, props를 받고 있는 자식컴포넌트 내에서는 수정이
불가능하니 이 또한 둘의 차이점이 되겠다.

profile
Frontend Developer

0개의 댓글

관련 채용 정보