React & TypeScript/React

State & Props 정의

yoonjong Park 2020. 12. 21.

목차

가장 명확하게 설명해 둔 글 같아서 기록해둔다. 여기 저기서 정의한 내용보다 훨씬 낫다.

 

1. State

컴포넌트 안에서 우리가 정의한 컴포넌트의 state 오브젝트 입니다.

컴포넌트 UI를 위한 데이터를 보관하는 오브젝트로, 이 state라는 오브젝트를 통해서 데이터에 업데이트가 발생하면 리액트가 자동적으로 우리가 구현한 render 함수를 호출하죠. 이 부분은 아마 제가 개념 설명을 할때 많이 얘기 해서 잘 아실것 같아요 🙌 

State & Props 정의

 

2. Props

컴포넌트 밖에서 주어지는 데이터 입니다.

컴포넌트 안에서 자체적으로 데이터를 정의해서 사용하는 State와는 다르게, Props은 컴포넌트 외부에서 데이터를 제공받습니다. 가장 근본적인 이유는 컴포넌트의 재사용을 높이기 위해서죠 :) 상황에 따라 주어진 데이터를 받아서 그 데이터에 맞게 UI를 보여주기 위해서 사용 되어져요. 

아래처럼 부모컴포넌트에서 이렇게 LikeButton 컴포넌트를 사용할때 title, onClick과 같은 아이들을 인자로 전달해 주면 이 아이들이 props 오브젝트로 묶여서 LikeButton 컴포넌트에 전달되어집니다.

State & Props 정의

그래서 LikeButton안에서 this.props.title, this.props.onClick으로 각각 전달된 'Like' 와 'this.handleClick' 함수에 접근 할 수가 있어요 :)

 

전체적인 그림을 보면:

 

로그를 찍어서 보시거나, 아니면 제가 알려드린 React Dev Tools 들을 이용해서 한번 확인해 보시면 더 이해가 빠르실 것 같아요.

State & Props 정의

이렇게 App 부모 컴포넌트에서 LikeButton 컴포넌트에 title과 onClick을 인자로 전달해 주면 

State & Props 정의

전달된 인자들이 오브젝트로 묶어져서 LikeButton컴포넌트 안에서 this.props으로 할당되어집니다.

우리의 유용한 React Dev Tools로 확인해 보시면 아래처럼 LikeButton 컴포넌트 안에 props과 state를 확인해 볼 수 있죠? :) 

 

State & Props 정의

 

출처 : Dream Coding by Ellie  (리액트 개념 정리 + 유튜브 클론 코딩 외 실전 프로젝트 완성_4.7.1 보충설명)
academy.dream-coding.com/courses/react-basic