State & Props 정의

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

 

1. State

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

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

 

2. Props

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

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

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

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

 

전체적인 그림을 보면:

 

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

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

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

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

 

 

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