Props

📌 Props

props 는 부모컴포넌트가 자식컴포넌트에게 넘겨준 데이터와 기능 등 을 의미

---

❓ react 를 사용하며 폴더 구조를 나눈 이후를 생각하면

Container (부모컴포넌트)

Presenter (자식컴포넌트)

위와 같이 컴포넌트를 나누면서 데이터와 기능의 연결이 끊어졌다

이때, 부모컴포넌트의 data = {data}와 onClickMoveToBoardDetail={onClickMoveToDetail} 처럼 props 로 연결이 가능하다

---

📌 props의 구조분해할당

props 를 받아오면 위의 presenter 에서 볼 수 있듯,

props.onClickMoveToDetail / props.deleteBoard 처럼 앞에 계속 props 를 붙여야한다.
이를 구조분해할당을 통해 사용 할 수 있다.

❗️ props.deleteBoard 를 예시로

export default function BoardListUI(props){
	<ColumnContentsDelete onClick={props.deleteBoard}>삭제하기</ColumnContentsDelete>
}

위의 코드를

export default function BoardListUI({deleteBoard}){
	<ColumnContentsDelete onClick={deleteBoard}>삭제하기</ColumnContentsDelete>
}

처럼 {} 중괄호를 통해 구조분해 할당을 하여 props 없이 사용 할 수 있다.

---

📌 emotion에 props 전달

emotion 태그에도 props 전달이 가능하다

import { useState } from 'react';
import { Test } from '../../src/test2';
export default function Test2() {
	const [isTrue, setIsTrue] = useState(false);
	const handleOnClick = () => {
		setIsTrue((prev) => !prev);	// useState로 설정된 기본값 false를 true로 바꿈
	};
	return (
		<>
			<Test isTrue={isTrue} onClick={handleOnClick}>색바꾸기</Test>
		</>
	);
}

isTrue 의 값을 emotion 으로 넘겨준다

import styled from '@emotion/styled';
export const Test = styled.div`
	color: ${(prev) => (props.isTrue ? 'red' : 'blue')};
`;

삼항연산자를 사용하여 isTrue 값에 따라 색을 지정해준다