props란?
📖properties의 줄임말로 컴포넌트에게 어떠한 데이터를 전달해야하는 경우 사용하는 객체
props는 쉽게 설명하면 html태그의 속성과 비슷하다고 할 수 있다. 아래 코드를 보자.
<div>
<!--태그 내 속성 부여-->
<input id="test" value="test" type="text"/>
</div>위 태그처럼 id, value, type 등의 속성을 부여해주는 것과 같이 컴포넌트를 렌더링하는 시점에 어떠한 데이터를 전달하기 위해 태그 내에 작성하는 것이 props인 것이다.
⚡️ props 특징
- props는 읽기 전용이므로 함수 및 클래스 컴포넌트의 자체 props를 수정해서는 안됨.
- 함수의 입력값을 바꾸려하지 않고 항상 동일한 입력값에 대해 동일한 결과를 반환하는 순수함수로 유지되어야함.
//순수함수 function sum(a, b){ //데이터의 수정없이 계획된 연산만 수행 return a+b; } //일반적인 함수 function sum(a, b){ //입력데이터의 변경이 이루어짐 a -= b; }
props의 특징에 대해서 알아보았다면 사용법에 대해서 알아보도록 하자.
props 사용
⚡️ 기본 사용법
컴포넌트에서 자식 컴포넌트를 사용할 때 content라는 데이터를 전달해주고 싶다고 가정하고 props를 사용하는 코드를 작성해보겠다.
🖥️ App.js
import React from 'react';
import Title from './Title';
function App(){
return(
<Title content="props study"/>
)
}
export default App;위 코드에서 Title 태그 내부에 content라는 props를 전달해주었다. 또는 아래처럼 state를 활용해 전달하는 방법도 있을 것이다.
🖥️ App.js(2)
import React from 'react';
import Title from './Title';
function App(){
//state 선언 및 초기값 설정
const [content, setContent] = React.useState("props study");
return(
//props로 전달하는 데이터를 state로 지정
<Title content={content}/>
)
}
export default App;어떤 데이터를 넘겨줄 것인지는 호출하는 쪽에서 결정하여 주면된다. props를 전달하면 어떻게 사용하는지 Title 컴포넌트의 코드를 들여다보자.
🖥️ Title.js
function Title(props){ //props의 명칭은 사용자가 정의하면된다. 통상 props를 많이쓴다.
return <h1>오늘 배운 내용은? {props.content}</h1>
//표현식을 통해 전달받은 props를 사용하면된다.
}위 코드 처럼 전달받은 props는 객체이기 때문에 소유구분 '.'으로 해주고 전달한 props명을 명시해주면된다. props가 객체라는 말은 전달받을 수 있는 데이터의 범위나 개수가 다양하는 것이다. 그럼 어떠한 타입을 받을 수 있는지 전부는 아니더라도 같이 알아보자.
⚡️ props의 자료형
🖥️ App.js
import React from 'react';
import Title from './Title';
function App(){
const array = [1, 2, 3];
return(
//string
<Title string="string"/>
//boolean
<Title boolean={true}/>
//number
<Title number={5}/>
//array
<Title array={array}/>
//function
<Title fn={() => {
console.log("함수다!!");
}}/>
...etc(Json도 가능)
)
}
export default App;props를 통해 전달할 수 있는 데이터의 자료형은 다양하다. 이러한 props의 데이터 타입을 지정하는 방법은 위처럼 태그를 작성하는 시점에 정해지기도 하지만 사전에 약속해놓고 사용할 수도 있다. 해당 코드는 아래와 같다.
🖥️ Title.js
import datatype from 'prop-types';
function Title(props){
return <h1>오늘 배운 내용은? {props.content}</h1>
}
Title.propTypes = {
String: datatype.string,
Number: datatype.number,
Boolean: datatype.bool,
...등등
}이렇게 props의 데이터 타입을 지정해주고, 호출하는 위치에서 해당 자료형과 다른 자료형을 입력해서 전달하고자하면 경고 메세지가 콘솔에 출력된다. 정확한 데이터를 넘겨주기 위하여 귀찮아도 사용하는 것을 권장한다.
⚡️ 복수 props, 비구조화 할당
항상 하나의 props만 전달하는 것은 아닐 것이다. 당연히 복수의 데이터를 props로 전달할텐데 이때 props. 이라는 구문을 반복하여 코드가 길어지고 중복되는 부분이 많아지는 것을 방지하며, 직관적으로 작성하여 가독성을 높이기 위하여 비구조화 할당을 사용한다. 아래 코드를 보자.
🖥️ App.js
import React from 'react';
import Title from './Title';
function App(){
return(
//복수 데이터 전달
<Title name="Mr.hwang" age={10}/>
)
}
export default App;복수의 데이터를 해당 컴포넌트에서 비구조화 할당을 통해 설정을 해보겠다.
🖥️ Title.js
function Title({name, age}){ //기존 props가 작성된 대괄호에 중괄호{}를 작성하고 전달한 데이터명을 직접입력한다.
return (
<div>
//비구조화 할당을 통해 해당 데이터명 직접 작성
<h3>내 이름은? {name}</h1>
<h3>내 나이는? {age}</h1>
</div>
)
}이렇게 비구조화 할당(혹은 구조 분해)을 통해 코드를 작성하면 조금 더 가독성이 좋고 간결한 코드를 작성이 가능하다.
마무리
이렇게해서 이번 게시글에서는 리액트의 props를 사용하는 방법에 대해서 알아보았다. state와 props는 둘 다 값을 컴포넌트 내에서 직접 변경하면 안된다는 공통점이 있다. 반대로 차이점은 props는 외부로부터 데이터를 전달받는 것이며, state는 컴포넌트 내부에서 선언되어 사용된다는 점이다. 이러한 부분들이 개발하는 과정속에서 지속적으로 염두해야할 사항이 아닌가 싶다.
느낀점
- props를 사용하면 컴포넌트에서 데이터를 표현하거나 보다 동적으로 컴포넌트를 제어하는 것이 가능해진다는 것을 느낌.
- props를 사용 시 호출하는 방법만으로도 코드가 간결해지며 다른 사람이 보더라도 가독성이 좋고, 직관성 있는 코드 작성이 가능하다는 것을 느낌.
- 순수 함수 개념으로 컴포넌트를 작성하여 컴포넌트에 입력된 props 값을 변경하지 않아야 한다는 것을 확인함. state를 잘 활용하면 이러한 규칙에 어긋나지 않게 동적으로 통제가 가능할 것 같다는 생각을 함.
props의 사용에 대해서는 많은 예제를 만들어가면서 연습이 필요할 것 같다. 그럼 이만👊🏽
