하위 컴포넌트에 boolean(참/거짓) props 변수 전달

React에서 하위 컴포넌트로 props 전달 시, 특정 요소에만 전달하기 원하는 변수가 존재한다.

 

아래 예시로 가로줄을 구성하는 Row 컴포넌트의 첫번째 줄에만 isLargeRow 변수를 전달해 다른 요소보다 크게 화면에 표현하고 싶다면

 

하위 컴포넌트에서 isLargeRow 변수의 default값을 false로 지정한 다음 원하는 특정 컴포넌트 요소에만 isLargeRow 변수를 전달해주면된다.

 

하위 컴포넌트

function Row({ data, isLargeRow = false }) {
	return(
    	<p className={`view ${isLargeRow && 'viewLarge'}`}> {data.name} </p>
    );
}
export default Row;

상위 컴포넌트로부터 data와 isLargeRow이라는 boolean값을 전달받는 Row 컴포넌트가 존재한다.

isLargeRow 변수를 통해 해당 컴포넌트를 다른 Row보다 크게 보이도록 할지 조절할 수 있는 변수이다.

 

상위 컴포넌트

App 컴포넌트가 다음과 같을 때,

export default function App() {
    const data = [...];
    return (
        <div>
            <Row data={data} isLargeRow />
            <Row data={data} />
            <Row data={data} />
        </div>
        )
    )
}

상위 컴포넌트인 App은 Row에 공통적으로 data를 전달하지만, 첫번째 Row 요소에만 isLargeRow 변수를 전달해 다른 요소들과 다르게 표현할 수 있다.

 

Result

<Row data={data} isLargeRow /> // true

<Row data={data}/> // false

이 경우 isLargeRow를 전달하지 않은 컴포넌트 측에는 해당 변수가 false의 default값을 가지도록 작성해두었기 때문에,  isLargeRow를 전달한 컴포넌트만 참의 값을 가지도록 전달이 된다.

 

이는 boolean 값이 아니더라도 어떤 데이터든 위와 같은 선택적 전달이 가능하며,

변수이름을 명확하게 작성해준다면 코드에서도 다른 컴포넌트와의 차이점을 확인하기 좋다.

 

Posted by Ang