About Props in React

Props에 대해서 개념을 짚고 넘어가자

 

 

1. State

Component 안에서 사용자가 정의한 Component의 state 오브젝트이다.

 

Component UI를 위한 자료를 보관하는 Object로써, state라는 Object를 통해서 데이터에 업데이트가 발생하면 React가 자동적으로 사용자가 구현한 render function을 호출한다. 이 부분을 아래 그림을 보자

Component 안에서 사용자가 정의한 컴포넌트의 state 오브젝트

2. Props

Component컴포넌트 밖에서 주어지는 데이터인데,

 

Component 안에서 자체적으로 데이터를 정의하여서 사용하는 State와는 달리, Props은 Component 외부에서 데이터를 제공받는다. 가장 근본적인 이유는 Component의 재사용을 높이기 위해서인데, 상황에 따라서 주어진 데이터를 받아서 그 데이터에 맞게 UI를 보여주기 위해서 사용되어진다.

 

아래그림처럼 Parent Component에서 이렇게 LikeButton Component를 사용할때 titls, onClick과 같은 아이들을 인자로 전달해 주면 이것들이 props object로 묶여서 LikeButton Component에 전달되어진다.

LikeButton안에서 this.props.title, this.props.onClick으로 각각 전달된 'Like'와 'this.handleClick'함수에 접근할 수 있다.

 

전체적으로 아래와 같이 App Parent Component에서 LikeButton Component에 title과 onClick을 인자로 전달해 주면

App Parent Conponent에서 LikeButton 컴포넌트에 title과 onClick을 인자로 전달

전달된 인자들이 Object로 묶어져서 LikeButton Component 안에서 this.props으로 할당되어진다.

인자들이 Object로 묶어져서 LikeButton Component 안에서 this.props으로 할당되어진다.

 

React Dev Tools로 확인해 보면 LikeButton 컴포넌트 안에 props와 state를 확인할 수 있다.

LikeButton Component 안에 props와 state를 둘다 확인 가능

 

 

 

 

<출처 : DreamCoding 리액트 개념 정리+유튜브 클론코딩: ellie>

참고: https://academy.dream-coding.com/courses/react-basic

리액트 강의 (유튜브 클론 코딩 + 실시간 전송 명함 카드 만들기 웹앱 만들기)