React Props의 특징 및 사용법

■ Props의 특징 및 사용법

- Props의 특징

1. Read-Only로 즉 읽기 전용이다.
   # 읽을수만 있다는 것은 즉 값을 변경할 수 없다는 말과 동일!
   # props의 값은 React 컴포넌트가 엘리먼트를 생성하기 위해 사용하는 값
   # 붕어빵이 다 구워졌는데 속재료를 바꿀수 없는것과 같은 이치
   
   ※ 다른 props의 값으로 엘리먼트를 생성하기 위해선?
   이 경우 새로운 값을 컴포넌트에 전달하여 새로 엘리먼트를 생성하면 된다.
   이 과정에서 엘리먼트가 다시 랜더링된다!
2. 모든 리액트 컴포넌트는 Props를 직접 바꿀 수 없고 같은 Props에 대해서는 항상 같은 결과를 보여줘야 한다.
   React 컴포넌트가 JavaScript의 함수와 같은 개념으로 React 컴포넌트의 입력으로 들어오는 props는
   자바스크립트 함수의 파라미터와 같다.
   
   ※ React 컴포넌트 관점에서 같은 props에 대해서 항상 같은 결과를 보여줘야 한다. 결과는 React 엘리먼트!
       React 컴포넌트의 props는 바꿀 수 없고, 같은 props가 들어오면 항상 같은 엘리먼트를 리턴해야 한다.

---

■ JavaScript 함수의 속성

# 위 함수에서는 a와 b라는 파라미터 값을 변경하지 않고 있다.

   a와 b라는 파라미터 집합의 값이 같은 경우에는 항상 같은 값을 리턴할 것이고 이를 pure(순수) 하다라 한다.

   이는 입력값(input)을 변경하지 않으며, 같은 입력값에 대해서는 항상 같은 출력값(output)을 리턴한다는 의미

---

# account와 amount라는 파라미터를 받아 account의 total이라는 값에서 amount를 빼는 함수다.

   계좌에서 출금하는 함수로 은행 계좌 정보와 총액을 파라미터로 받아 계좌의 현채 총 잔액을 나타내는 토탈에서

   출금할 금액인 amount를 빼는 것이다.

   위 함수는 입력으로 받은 파라미터 account의 값을 변경했다. 이 경우 impure(순수하지 않다)하다라 한다. 

---

■ Props 사용법

: props는 컴포넌트에 전달할 다양한 정보를 담고 있는 자바스크립트 객체

---

- props라는 객체를 전달하기 위해서는?

인프런 : 처음-만난-리액트 참고

 

# JSX를 사용하는 경우 위 코드와 같이 키와 값으로 이루어진 키값상의 형태로 props를 넣을 수 있다.

# 이 코드에는 app 컴포넌트가 나오고 그 안에서 profile 컴포넌트를 사용하고 있다.

   profile 컴포넌트에 name, introduction, viewCount라는 3가지 속성이 있는데 차이는 {} 중괄호 사용 여부다.
   props에 값을 넣을 때에도 문자열 이외에 정수, 변수, 그리고 다른 컴포넌트 등이 들어갈 때 중괄호를 사용해야 한다.

---

 

이렇게 하면 이 속성의 값들이 모두 프로필 컴포넌트의 props로 전달되며

 

props는 아래와 같은 형태의 자바스크립트 객체가 된다.

---

 

# 레이아웃 컴포넌트의 props로는 정수값을 가진 width, height과 react 엘리먼트로 header, footer가 들어온다.

# jsx를 사용하는 경우에는 간단하게 컴포넌트에 props를 넣을 수 있다.

---

- JSX 코드를 사용하지 않고 작성하면?

# createElement 함수를 사용하여

  - type : 컴포넌트 이름인 profile

  - props : name, introduction, viewCount

  - children : 내용이 없어 null 압력