오늘의 공부 노트는 React에서 컴포넌트에 값을 전달해야 할 일이 무조건 있을 것이다 이럴 경우는 어떤 식으로 전달하는지 알아보자!
# 프로퍼티(Props)란?
- properties의 줄임말이다.
- 상위 컴포넌트가 하위 컴포넌트에 값을 전달할 때 사용한다 즉 단방향 데이터 흐름을 갖는다.
- 프로퍼티는 하위 컴포넌트에서 수정이 불가하다.
우선 개념적 정의를 알아봤으니 이제 사용방법을 알아보자!
# 사용법
시나리오 - 버튼을 생성해주는 컴포넌트가 있고 버튼의 text, fontColor, onClick 이벤트를 프로퍼티로 넘겨주고 설정해 주는 시나리오이다.
우선 프로퍼티가 없이 구현한 코드를 먼저 살펴보자!
function CustomButton(){
return <button>버튼이다!</button>
}
function App() {
return (
<div>
<CustomButton />
<CustomButton />
</div>
);
}
코드를 보면 CustomButton이라는 컴포넌트가 있다 여기서는 별다른 거 없이 버튼을 생성해 주는 역할을 한다.
하지만 여기서 문제가 있다 저 두 개의 버튼의 text와 color를 변경하고 싶은데 그러기 위해서는 각각 다른 컴포넌트를 생성해줘야 한다.
만약 여기서 버튼이 100개 1000개라면? 일일이 다 해줄 수 없는 노릇이다.
그러기 위해서는 컴포넌트에 프로퍼티를 넘겨서 하나의 컴포넌트를 재사용하는 게 훨씬 좋다!
이제 다시 프로퍼티를 적용한 코드를 단계별로 봐보자!
## 1단계 넘겨준 프로퍼티 값 확인 해보기
function CustomButton(props){
console.log(props)
return <button>버튼이다!</button>
}
function App() {
return (
<div>
<CustomButton buttonName="버튼1"/>
<CustomButton buttonName="버튼2"/>
</div>
);
}
위 코드를 살펴보면, CustomButton 컴포넌트 태그 안에 'buttonName'이라는 이름으로 버튼의 이름들을 지정해 준 것을 볼 수 있다.
CustomButton 컴포넌트의 () 안을 확인하면 'props'라는 표현이 있는데, 이것이 프로퍼티를 받는 방법이다.
코드 바로 아래 사진은 받아온 props를 로그로 출력한 결과인데, 여기서 주목해야 할 점은 프로퍼티가 받아지는 형태가 Object 형식이라는 것이다. 즉, KEY - VALUE 형식으로 이루어져 있다고 볼 수 있다. 위 코드에서 예를 들자면 buttonName이 KEY에 해당하고 "버튼 1"이 VALUE에 해당한다.
따라서 다음 코드는 Object에서 우리가 필요한 값을 추출하는 코드이다.
## 2단계 프로퍼티 값을 실제 적용해 보기
function CustomButton(props){
return <button>{props.buttonName}</button>
}
function App() {
return (
<div>
<CustomButton buttonName="버튼1"/>
<CustomButton buttonName="버튼2"/>
</div>
);
}
이번 코드에서는 CustomButton 컴포넌트로부터 받아온 Object 형식의 props를 활용하고 있다. 이를 button 태그 내에서 참조할 수 있도록 대괄호 {}를 사용하여 props.buttonName으로 값을 가져오고 있다. 만약 props.buttonName을 통해 값을 가져오는지 이해가 어렵다면, 위에서 로그로 확인한 사진을 다시 보면 이해가 쉽게 될 것이다.
## N단계 (프로퍼티값을 가져오는 간단한 방법, 여러 가지 프로퍼티 넘기기)
function CustomButton({buttonName, click}){
return <button onClick={click}>{
buttonName
}</button>
}
function App() {
const [testButtonText,setTestButtonText] = React.useState("버튼 눌리기 전")
function customButtonClick(){
return (setTestButtonText("버튼이 눌림"));
}
return (
<div>
<CustomButton buttonName={testButtonText} click={customButtonClick}/>
<CustomButton buttonName="버튼2"/>
</div>
);
}이번 코드에서는 React.useState를 사용하여 State를 생성하고, 해당 State와 이를 변경하는 click 컴포넌트를 CustomButton 컴포넌트에 전달하고 있다.
2단계에서 진행한 코드와의 주요 차이점은 CustomButton 컴포넌트의 () 안이 대괄호({})로 표현되어 있다는 점이다.
대괄호({})로 표현한 이유는, 위에서 로그로 확인한 것처럼 프로퍼티가 Object 형식으로 전달되기 때문이다. 따라서 {태그에서 전달한 KEY} 형식으로 값을 가져오면 정상적으로 작동한다.
위 예제 코드에서 태그에서 전달한 KEY는 buttonName이므로, 컴포넌트 내부의 {} 안에 동일하게 buttonName을 적어주면 정상적으로 작동한다. ※ 여기서 주의할 점은 태그에서 전달한 KEY와 컴포넌트 내부의 {} 안에 값을 동일하게 줘야 한다는 것이다!
또한 여러 개의 프로퍼티를 전달하려면, 처음에 한 것처럼 KEY - VALUE 형식으로 값을 넘겨주면 된다.
그리고 프로퍼티 값은 반드시 text, boolean, int 등의 기본 데이터 타입만 가능한 것이 아니라 위 코드처럼 함수도 가능하다. 따라서 위 예제 코드는 버튼 클릭 시 전달받은 함수가 호출되도록 구성된 방식이다.