[리액트(React) 학습자를 위한 기초지식] Props&State - #1 props

리액트(React) 학습에 필요한 사전지식

Props&State - #1 props

Props

Props의 기본

Props는 컴포넌트의 속성(property)입니다. 컴포넌트를 표시하는 데 필요한 값을 Props라 불리는 것을 통해 전달받을 수 있습니다.

예시를 통해 Props를 살펴볼까요? 아래 예시는 이렇습니다. name이라는 이름으로 컴포넌트 속성을 생성하고, name이라는 컴포넌트 속성에 문자열 'Jake'를 전달해 화면에 표시하도록 하겠습니다.

Hello.js

import React from 'react';

const Hello = (props) => {

return(

<div>

Hello, My name is {props.name}.

</div>

);

}

export default Hello;

App.js

import React from 'react';

import Hello from './basic/Hello';

const App = () => {

return(

<div>

<Hello name="Jake" />

</div>

);

}

export default App;

결과화면

이렇듯 Props는 컴포넌트에 속성을 부여하고 값을 지정하는 역할을 합니다. 위 예시로 설명하자면, Hello 컴포넌트에 name이라는 속성을 생성하고, Hello 컴포넌트를 소환하는 App.js에서 해당 컴포넌트에서 생성한 Props인 name을 불러와 'Jake'라는 문자열을 넣어줍니다. 즉, 해당 컴포넌트를 호출한 파일(혹은 컴포넌트)에서 생성한 속성을 통해 데이터를 전달하는 것입니다.

위에서 설명했듯 부모 요소(호출한 컴포넌트, 혹은 파일)로부터 전달받은 속성은 객체 props에 저장된 상태이므로 이를 인수로 얻을 수 있습니다. Props 내부는 단순한 객체이므로 문자열 이외의 값도 다룰 수 있습니다. 예를 들어 여러개의 값이 필요할 땐 객체로 미리 정의한 것을 그대로 전달하면 이해하기 쉬운 코드를 유지할 수 있습니다. 다음은 이러한 코드의 예시입니다.

Profile.js

import React from 'react';

const Profile = (props) => {

//구조분해 할당*

const { name, age, hobby } = props.profile;

return(

<dl>

<dt>Name</dt><dd>{name}</dd>

<dt>Age</dt><dd>{age}</dd>

<dt>Hobby</dt><dd>{hobby}</dd>

</dl>

);

}

export default Profile;

구조분해 할당이 궁굼하면 여기로! -> [리액트(React) 학습자를 위한 기초지식] 템플릿 리터럴, 구조분해 할당

이제 위에서 작성한 Profile.js를 App.js에서 호출하여 이렇게 사용합니다.

App.js

import React from 'react';

import Hello from './basic/Hello';

import Profile from './basic/Profile';

const Jake = {

name: 'Jake',

age: 20,

hobby: 'Playing the piano'

}

const App = () => {

return(

<div>

<Hello name="Jake" />

<Profile profile={Jake} />

</div>

);

}

export default App;

프로젝트를 실행하면 브라우저에서 다음과 같이 화면이 나옵니다.

실행결과

Props 배열처리

Props로 전달하려는 값이 리스트인 경우 어떻게 처리할까요?

import React from 'react';

const ListEx = (props) => {

const listItems = props.list.map(

(index, id) => {

console.log('index', index);

console.log('id', id);

return <li key={id}> {index} : {id} </li>

}

)

return(

<div>

{listItems}

</div>

);

}

export default ListEx;

props.children

<참조>

1. 이시바시 케이타. ⌜더 괜찮은 웹 개발자가 되기 위한 리액트 스타일 가이드⌟. 구멍가게 코딩단, 안동현(옮김). 프리렉, 2019