[뒤늦게 정리하는 패캠] React : Props

React Props 이해하기

 

커스텀 엘리먼트를 만들고 그 태그 안에 적는 모든 데이트를 props라고 부른다고 이해했다.

 props는 object(객체) 형태로 생성된다.

 

객체 데이터의 형태

{ 이름 : 값, 이름 : 값 }

 

그래서 위의 코드에 props라는 매게변수도 object 형태로 전달전달전달전달전다랄ㄹㄹㄹ 된다.

1. <Comment /> 엘리먼트를 통해서 comment라고 선언된 객체 데이터의 date, text, author가 전달된다.

여기서 전달된 props의 형태

date: 날짜정보, text: "I hope you enjoy learning React", author: { name: "Hello Kitty", avatarUrl: "https://......" }

2. <Comment /> 함수 내부에서 <UserInfo /> user={props.author}가 UserInfo 함수에 전달된다.

여기서 전달된 props의 형태

user: { author: { name: "Hello Kitty", avatarUrl: "https://......" } }

...

이런 형태로 Avatar에도 전달전달 되어서 props가 사용되고 있다.

이렇게 사용해야 재사용에 편리하다고 하지만, props 전달전달ㄹ전달ㄹ을 이해하는 것만으로도 버거움...^^

재사용 예를들면 <Avatar />로 나타내고 있는 이미지가 홈페이지 내에서 프로필, 댓글, 친구찾기 등 다양한 페이지에서 이용되는 경우 저 <Avatar /> 하나로 여러 군데에서 사용이 가능하다는 뜻이다.

 

***

props는 JavaScript에서 변수의 값을 변경하는 것과 달리

본래 값을 변경하지 않는다.

그래서 Functional Component는 State라는 훅으로 값이 변경되었을 때의 상태를 관리한다.

 

반면, Class Component는 JavaScript 처럼 변수에 값을 수정해서 부여하는

let a = 1;

a = 2; 가 가능하다.

 

***

 

State는 다음 포스팅에서!

👋