[React] - [처음 만난 리액트] - 15. Props의 특징 및 사용법(JSX, Props 사용예제)

🧹 두서없이 적는 쉬운 정리

1. Props의 중요한 특징은 Read-only 즉 읽기 전용이므로 변경이 불가하다.

2. 다른 Props의 값으로 엘리먼트를 생성하려면새로운  Props 값을 컴포넌트의 전달하여 새로 엘리먼트를 생성하면 된다.

3. 위 과정에서 엘리먼트가 다시 렌더링 된다.

4.  Props의 값을 넣을 때 문자열 이외 [정수 변수 그리고 다른 컴포넌트 등]이 들어갈 경우 중괄호 {} 를 사용해서 감싸 주어야 한다.

5.  Props는  자바스크립트 객체가 된다.

6.  JSX 를 사용하는 경우에는 간단하게 컴포넌트의 Props를 넣을 수 있다.

7.  JSX를 사용하지 않는경우에는 React.createElement()를 사용하면 된다. (비추천)

 

(자세한 내용은 아래 참고)

 

 

---

 

Props의 특징

Props의 중요한 특징은 Read-only 즉 읽기 전용이라는 것이다.

값을 변경할 수 없다는 말

 

Props 값은 리액트 컴포넌트가 엘리먼트를 생성하기 위해서 사용하는 값이다.

이 값들이 엘리먼트 생성 도중에 바뀌어 버리면 제대로 된 엘리먼트가 생성될 수 없다.

 

마치 붕어빵이 다 구어진 이후에 속재료를 바꿀 수 없는 것과 마찬가지.

 

 다른 Props 의 값으로 엘리먼트를 생성하려면 어떻게 해야 할까?

그럴 때는 새로운  Props 값을 컴포넌트의 전달하여 새로운 엘리먼트를 생성하면 된다.

이 과정에서 엘리먼트가 다시 렌더링 되는 것.

 

여기서 잠시 자바스크립트 함수의 속성에 대해서 보자

 sum 이라는 이름을 가진 함수는 a와 b라는 두 개의 파라미터를 받아서 합을 리턴하는 함수이다.

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

그리고 a 와 b라는 파라미터 집합의 값이 같은 경우에는 항상 같은 값을 리턴한다.

 

우리는 이러한 함수를 Pure 하다라고 한다.

 

말 그대로 함수가 순수하다 는 뜻인데 이 말은 입력 값을 변경하지 않으면

 같은 입력 값에 대해서는 항상 같은 출력 값을 리턴한다는 의미

 

순수하지 않은 경우

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

쉽게 이야기하면 계좌에서 출금을 이야기한다.

 

이런 경우는 impure 하다라고 합니다 순수하지 않다는 뜻

 

모든 리액트 컴포넌트는 Props를 직접 바꿀 수 없고 같은 Props 대해서는 항상 같은 결과를 보여줄 것

 

리액트 컴포넌트가 자바스크립트의 함수와 같은 개념이라고 설명했었다.

그렇기 때문에 리액터 컴포넌트 의 입력으로 들어오는 Props는 자바스크립트 함수의 파라미터 와 같다.

함수의 결과는 리액트 엘리먼트가 된다.

 

정리하면 리액트 컴포넌트는 Props를 직접 바꿀 수 없고 같은 Props 가 들어오면 항상 같은 엘리먼트를  출력해야 한다

 

🧑🏻‍💻 Props 사용방법

Props는 컴포넌트의 전달할 다양한 정보를 담고 있는 자바스크립트 객체이다.

 

🧑🏻‍💻 JSX를 사용하는 경우

위 코드는 키와 값으로 이루어진 키값 쌍의 형태로 컴포넌트의 Props를 넣는다. 

App 컴포넌트가 있고 그 안에 Profile 컴포넌트를 사용하고 있다.

여기서 Profile 컴포넌트의 name, introduction, viewCount라는 세 가지 속성들을 넣어줬다.

 

중괄호 {}를 사용하면 무조건 자바스크립트 코드가 들어간다

그래서 마찬가지로 Props 값을 넣을 때 정수 변수 그리고 다른 컴포넌트 등이 들어갈 경우 중괄호 {} 를 사용해야 한다.

물론 문자열 도중 괄호 {}로 감싸 도 상관은 없다.

 

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

Props는 이와 같은 형태의 자바스크립트 객체가 된다.

 

그리고 Profile는 중괄호 {}를 사용해서 아래와 같이 Props의 값으로 컴포넌트도 넣을 수 있다

이렇게 하면 Layout 컴포넌트에 Props 값으로는

정수 값을 가진 width, height과 리액트 엘리먼트로는 Header, Footer가 들어오게 됩니다

 

이처럼 JSX를 사용하는 경우에는 간단하게 컴포넌트의 Props를 넣을 수 있다.

 

🧑🏻‍💻 JSX를 사용하지 않는 경우

JSX를 사용하지 않고 Props를 사용하려면 createElement()를 사용하면 된다.

type : 컴포넌트의 이름인 Profile 들어가고

props : 자바스크립트 객체가 들어갔다.

children ;  그리고 마지막으로 하위 컴포넌트가 없기 때문에 null

 

리액트로 개발할 때는  JSX를 사용하는 것이 좋다.

그렇기 때문에 이 코드는 참고만 하고 실제로Props를사용할 때는  JSX를 사용하는 형태로 사용하자

 

 

 

 

 

 

위 내용은 '소플' 님의 '처음 만난 리액트' 영상을 참고하여 작성되었습니다.