Original article: How to Use Props in React
이 튜토리얼에서는 리액트에서 중요한 개념인 props에 관해 얘기해보겠습니다. 앱에서 데이터 흐름을 동적으로 유지하는데 어떻게 props가 사용되는지 보여드릴게요.
전제 조건
이 튜토리얼을 따라 하려면 아래 내용을 알아야 합니다.
- 리액트 앱
추가로 이미 이것들을 이해하고 있다고 가정하겠습니다.
- 리액트에서 컴포넌트란 무엇이고 어떻게 사용하는가.
- 리액트에서 ES6 특징들 사용 방법 (잘 모르시겠나요? 이 기사 를 읽어주세요.
- 리액트에서 기본적인 state 관리 방법 (어떻게 되는지 모르시겠나요? 이 기사를 읽어주세요).
리액트에서 props는 무엇일까요?
리액트에서는 하나의 컴포넌트에서 다른 컴포넌트로 데이터를 전달할 때 props를 사용합니다(부모 컴포넌트에서 자식 컴포넌트(들)로). Props는 properties를 줄인 말입니다. 앱에서 데이터 흐름을 동적으로 만들고 싶을 때 유용합니다.
저의 App.js 컴포넌트입니다.
function App() {
return <div className="App"></div>;
}
export default App;
이제 Tool.js라는 이름의 또 다른 컴포넌트를 만들어봅시다. 이 파일은 프로덕트 디자이너가 가장 좋아하는 도구에 대한 정보를 보여줍니다. Props를 사용하지 않을 경우 코드는 이런 식으로 생겼습니다.
function Tool() {
return (
<div>
<h1>My name is Ihechikara.</h1>
<p>My favorite design tool is Figma.</p>
</div>
);
}
export default Tool;
App 컴포넌트에 이 컴포넌트를 가져오겠습니다. 바로 이렇게요.
import Tool from './Tool';
function App() {
return (
<div className="App">
<Tool />
</div>
);
}
export default App;
Tool 컴포넌트가 여러 컴포넌트에 걸쳐 재사용이 가능해 여러 디자이너와 그들이 선호하는 도구를 설명한다고 가정해봅시다.
리액트를 사용하면 코드를 다시 쓰지 않아도 컴포넌트의 로직을 쉽게 가져올 수 있지만, 이 특정 컴포넌트에는 이미 하드 코드 된 데이터가 있습니다. 즉, 다른 컴포넌트를 위해 매번 해당 로직을 다시 쓰거나, 여러분이 추측했듯이 다른 컴포넌트의 데이터를 바꾸기 위해 props를 사용해야 합니다.
어떻게 작동하는지 아직 이해가 안된다면, props는 우리가 컴포넌트의 로직을 동적으로 재사용할 수 있도록 해준다고 생각해 보세요. 이 말은 컴포넌트 안의 데이터는 정적이지 않을 거라는 겁니다. 그래서 그 로직을 사용하는 다른 컴포넌트에 대해 해당 컴포넌트의 데이터를 요구사항에 맞게 수정할 수 있습니다.
리액트에서 props 사용하는 방법
이 섹션에서는, props를 사용하는 두 가지 방법을 배울 것입니다. 디스트럭쳐링(distructuring) 없이 하는 방법과 디스트럭쳐링(distructuring)으로 하는 방법입니다.
디스트럭쳐링(distructuring) 없이 props 사용하는 방법
props를 사용하려면 함수에 props를 인자로 전달해야 합니다. 일반 자바스크립트의 함수에 인자를 전달하는 것과 비슷합니다. 여기 예시가 있습니다.
function Tool(props) {
const name = props.name;
const tool = props.tool;
return (
<div>
<h1>My name is {name}.</h1>
<p>My favorite design tool is {tool}.</p>
</div>
);
}
export default Tool;
위에서 일어난 일을 하나하나 설명해드릴게요.
1단계 - Props를 인자로 전달
위 코드의 첫 번째 줄에서 전달했습니다: function Tool(props){}. 이렇게 하면 자동으로 리액트 앱의 구성 요소에서 props를 사용할 수 있습니다.
2단계 - Props를 변수로 선언
const name = props.name;
const tool = props.tool;
위에서 볼 수 있듯이, 이러한 변수는 그 안의 데이터를 props와 쓰기 때문에 일반적인 변수와는 다릅니다.
Props에 사용할 변수를 만들고 싶지 않으면, 다음과 같이 템플릿에 직접 전달할 수 있습니다: <h1> My name is {props.name} </h1>
3단계 - JSX 템플릿에 변수 사용
변수를 선언했으므로 코드에서 원하는 위치에 변수를 사용할 수 있습니다.
return (
<div>
<h1>My name is {name}.</h1>
<p>My favorite design tool is {tool}.</p>
</div>
);
4단계 - App 컴포넌트의 props에 데이터 전달
Props 만들기가 끝났기 때문에 다음 단계는 그들에게 데이터를 전달하는 것입니다. 우리는 이미 Tool 컴포넌트를 가져왔으며 현재 브라우저에 표시되고 있습니다.
My name is .
My favorite design tool is .
선언 시 props에 기본 데이터를 생성하여 변수가 비어있지 않게 표시 할 수 있습니다. 마지막 섹션에서 이 작업을 수행하는 방법을 확인할 수 있습니다.
이것이 App 컴포넌트의 현재 상태임을 기억하세요.
import Tool from './Tool';
function App() {
return (
<div className="App">
<Tool />
</div>
);
}
export default App;
데이터가 정확히 어디로 전달되는지 궁금하시겠죠. 이렇게 하려면 속성처럼 데이터를 전달합니다. 이렇게 생겼죠.
import Tool from './Tool';
function App() {
return (
<div className="App">
<Tool name="Ihechikara" tool="Figma" />
</div>
);
}
export default App;
변화를 눈치채셨나요? 여기 <Tool/>에서 <Tool name="Ihechikara" tool="Figma"/>까지. 이러한 속성은 Tool 컴포넌트에 생성된 props에 붙기 때문에 오류가 발생하지 않습니다.
브라우저에 이렇게 표시되어야 합니다.
My name is Ihechikara.
My favorite design tool is Figma.
변수명은 props 자체가 아닙니다. 이런 식으로 const myPropName = props.name 식으로 변수를 만들고 템플릿에 변수를 <h1>My name is {myPropName}.</h1>라고 썼다면, <Tool name="Ihechikara" tool="Figma"/> 할 경우 코드는 완벽히 작동할 겁니다. name 속성은 prop을 포함한 변수명에서 오는 게 아닌 props.name으로 부터 오는 겁니다.
이제 Tool 컴포넌트에 정의된 로직을 사용하여 모든 컴포넌트에 대한 데이트를 동적으로 생성할 수 있습니다. 여러분은 원하는 만큼 props를 선언할 수 있습니다.
다음으로 여러분은 어떻게 디스트럭쳐링(distructuring)으로 props를 사용하는지 배우게 될 겁니다.
디스트럭쳐링(distructuring)으로 props 사용하기
이 섹션의 코드는 props를 선언하는 방법 외에 지난 섹션과 완전히 동일합니다. 자바스크립트에서 디스트럭쳐링(distructuring)을 잘 모르신다면 이 기사를 확인해주세요.
지난 섹션에서는 이런 식으로 props를 선언했습니다.
const name = props.name;
const tool = props.tool;
디스트럭쳐링(distructuring)을 하면 이럴 필요가 없습니다. 간단히 이렇게 하면 되죠.
function Tool({ name, tool }) {
return (
<div>
<h1>My name is {name}.</h1>
<p>My favorite design tool is {tool}.</p>
</div>
);
}
export default Tool;
코드의 첫 번째 줄에 차이점이 있습니다. props를 인자로 전달하는 대신 변수를 분해하여 함수의 인자로 전달했습니다.
나머지는 같습니다.
Props로 단일 변수뿐만 아니라 함수와 오브젝트의 데이터도 동일하게 전달할 수 있습니다.
Props에 기본값 설정하는 방법
Props를 만들 때 빈값으로 두고 싶지 않다면 기본값을 전달할 수 있습니다. 방법은 이렇습니다.
function Tool({ name, tool }) {
return (
<div>
<h1>My name is {name}.</h1>
<p>My favorite design tool is {tool}.</p>
</div>
);
}
Tool.defaultProps = {
name: 'Designer',
tool: 'Adobe XD',
};
export default Tool;
컴포넌트를 내보내기 전 코드 끝부분에 props에 대한 기본값을 선언했습니다. 이를 위해 컴포넌트의 이름과 리액트 앱을 만들때 기본으로 제공되는 defaultProps를 연결하는 점으로 시작했습니다.
이제 이 컴포넌트를 가져올 때마다 해당값이 공백이 아닌 초기값이 됩니다. 이전 섹션에서와 같이 자식 컴포넌트에 데이터를 전달하면 기본값으로 재정의됩니다.
결론
이 기사에서는 props를 사용할 때 필요한 모든 것과 컴포넌트 간에 데이터를 동적으로 전달하는 방법에 대해 다뤘습니다.
이러한 개념을 이해하는 가장 좋은 방법은 직접 실습하고 멋진 결과물을 만들어 보는 것이니, 읽는데 그치지 말고 직접 만들어 보세요.
트위터에서 저를 찾으실 수 있어요@ihechikara2. 해피 코딩하세요!