<< 학습 목표 >>
1. 컴포넌트를 호출 할 때 컴포넌트로 값을 전달할 수 있다.
2. props에 대해서 설명할 수 있다.
3. props로 전달할 값을 올바르게 표현할 수 있다.
4. 컴포넌트의 이름이 대문자로 시작해야하는 이유를 설명할 수 있다.
JS에서 함수를 선언할 때 매개변수를, 호출 할 때는 인자를 넣어서 함수로 값을 전달 할 수 있음
리엑트의 컴포넌트도 선언할 때 매개변수를, 호출 할 때는 인자를 넣어서 함수로 값을 전달 할 수 있음
전 글에서 도서 3권의 정보를 출력하기 위해 각 도서 정보를 갖고 있는 컴포넌트를 만들었는데 이번에는 한 컴포넌트를 사용해 3권의 도서 정보를 출력해보자
프로젝트 -> src -> chapter02 -> SomeBook.jsx 파일을 추가하고 아래 코드를 입력하자
import React from 'react'
function SomeBook(param) {
return (
<div>
<h1>도서명 : {param.name}</h1>
<h2>저자 : {param.author}</h2>
<h3>출판사 : {param.publisher}</h3>
<hr/>
</div>
);
}
export default SomeBook;
이제 이 컴포넌트를 불러와 화면에 출력할 수 있게 App 컴포넌트를 추가하자
프로젝트 -> src -> chapter02 -> App1.js 파일을 추가하고 아래 코드를 입력하자
import React from 'react';
import SomeBook from './SomeBook';
function App() {
let book1 = {
"name": "소플의 처음만난 리액트",
"author": "이인제",
"publisher": "한빛미디어"
};
let book2 = {
"name": "리액트를 다루는 기술",
"author": "김민준",
"publisher": "길벗"
};
let book3 = {
"name": "한 입 크기로 잘라 먹는 리액트",
"author": "이정환",
"publisher": "인사이트(insight)"
};
return(
<div>
{SomeBook(book1)}
<SomeBook name={book2.name} author={book2.author} publisher={book2.publisher} />
<SomeBook name={book3.name} author={book3.author} publisher={book3.publisher} />
</div>
);
}
export default App;
App1.js 파일에서 컴포넌트를 호출 할 때 권장하지 않는 방식(1)과 권장하는 방식(2)을 혼합해서 사용했음
권장하지 않는 방식은 컴포넌트를 함수처럼 호출하는 것이므로 함수를 호출 할 때 인자를 넣듯이 컴포넌트로 전달할 값을 넣을 수 있음
권장하는 방식은 함수 호출과는 완전히 다른 방식임
권장하는 방식을 사용해서 컴포넌트로 값을 전달할 때는 값만 전달하면 안되고 전달할 값의 이름도 함께 지정(3)해야함
권장하는 방식을 사용해서 컴포넌트로 값을 전달하면 다음과 같이 JSON에 담겨서 컴포넌트의 매개변수로 전달 됨
컴포넌트로 값이 잘 전달됬는지 App 컴포넌트를 출력해 확인해보자
프로젝트 -> src -> index.js 를 다음과 같이 수정하고 프로젝트를 실행시켜보자
3권의 도서 정보가 출력되는걸 확인할 수 있음
컴포넌트의 매개변수 이름은 일반적으로 props 로 지어줌
앞으로는 컴포넌트의 매개변수 이름을 props 로 짓겠음
SomeBook 컴포넌트의 매개변수 이름을 props로 바꾸자
또한 컴포넌트의 매개변수 라는 말을 이제부터 props 라고 부르겠음
props로 전달 할 수 있는 데이터의 형태는 다양함
정수, 실수, 문자열, 논리값은 물론이고 JSON, 심지어는 컴포넌트도 전달할 수 있음
적절한 형태는 아니지만 SomeBook 컴포넌트의 props 로 다음과 같이 다양한 형태의 데이터를 보내보자
프로젝트 -> src -> chapter02 -> App2.js 를 추가하고 아래 코드를 추가하자
import React from 'react';
import SomeBook from './SomeBook';
function App() {
let data = {
"name": "value"
};
return(
<div>
<SomeBook name={1} author={3.14} publisher="한빛미디어" />
<SomeBook name={true} author={data} publisher={<div>한빛미디어</div>} />
</div>
);
}
export default App;
이 컴포넌트는 출력할 수 없으니 코드만 보자
props로 값을 전달 할 때 문자열 외에 모든 형태의 데이터는 { } 안에 표현했음
문자열도 { } 안에 표현해서 {"한빛미디어"} 와 같이 표현할 수 있지만 중괄호를 생략해도 되니 일반적으로 props로 문자열을 전달 할 때는 { } 를 생략함
문자열 외에 모든 형태의 데이터는 반드시 { } 안에 표현해야함
props의 중요한 특징은 읽기 전용(Read-Only) 라는 것임
읽기 전용이라는 것은 props에 저장된 값을 사용할 수만 있고 props에 저장된 값을 바꾸면 안된다는 것
SomeBook 컴포넌트에서는 props에 저장된 값을 사용하기만 하고 저장된 값을 바꾸진 않고 있음
만약 왼쪽처럼 컴포넌트의 props 값을 바꾸려고 한다면 웹 페이지에는 무시무시한? 에러 페이지가 보이게됨
컴포넌트 안에서는 전달 받은 값을 절대 바꾸면 안되지만 어쩔 수 없이 바꿔야한다면 다음과 같이 우회할 수 있음
마지막으로 컴포넌트 이름에 대해서 알아보자
앞서 컴포넌트 기초 ( https://codingaja.tistory.com/72 ) 에서 컴포넌트 이름은 반드시 대문자로 시작해야한다고 했음
컴포넌트 이름이 왜 대문자여야 하는지 알아보자
아래 코드에서 el1과 el2에 무언가를 저장하고 있음
el1에는 HTML의 br 태그를 저장하고 있고 el2에는 welcome 컴포넌트가 반환한 태그를 저장하고 있는 것임
나는 어떻게 구분했을까? HTML에는 welcome 이라는 태그가 없으므로...
import React from 'react';
function App() {
let el1 = <br />
let el2 = <welcome />
return(
<div>
{el1}
{el2}
</div>
);
}
export default App;
이렇게 컴포넌트명이 소문자로 시작하면 이 코드가 HTML 태그를 나타내는 코드인지 컴포넌트를 호출하는 코드인지 구분할 수 없게 됨
그래서 컴포넌트를 호출하는 코드임을 확실히 파악하기 위해 컴포넌트명의 첫 글자를 대문자로 지어주는 것임
정~말 마지막으로 컴포넌트는 반드시 태그를 반환해야함
태그를 반환하지 않는 컴포넌트를 호출하면 화면에 NaN 으로 출력됨
만약 태그를 반환하지 않는 컴포넌트를 만들었다면 JS 함수로 바꿔야함
JS의 함수로 바꾼다는건?
이름의 첫 글자를 소문자로 바꾸고 호출할 때도 {함수명()} 으로 호출해야함
'JS + React > React-Chapter02' 카테고리의 다른 글
| Chapter02. 리엑트 주소록 컴포넌트 만들기 (0) | 2023.03.30 |
|---|---|
| Chapter02. 리엑트 컴포넌트 기초 (0) | 2023.03.29 |
| Chapter02. 리엑트 JSX (0) | 2023.03.29 |
| Chapter02. 리엑트 프로젝트 실행, 종료 시키기 (0) | 2023.03.29 |
