컴포넌트 간에 data 전달하는 방법 : props 객체

연관 내용
[폴더 구조]

기존에 하나로 이루어져있던 컴포넌트를 2개로 나누면 데이터와 기능을 연결해줘야 한다.
부모가 가지고 있는 변수/함수를 자식에게 props라는 객체로 묶어서 넘겨줄 수 있다.
props: properties (속성)

data 전달하는 방법

• react는 데이터 흐름이 단방향 구조이다.
  props는 부모에서 자식으로만 전달할 수 있다.
  (상태관리 라이브러리를 사용하면 우회하는 방법은 있지만, 기본적으로는 부모에서 자식으로만 흐른다.)

1. 부모 component - props 내려주기

return 구문에 자식 컴포넌트를 적을 때 태그 안에 {전달할 이름}과 {데이터}를 넣는다.

return(
		// 자식 컴포넌트 _ presenter 컴포넌트 
		<BoardWriteUI propsName={handlechangeWriter}/>
	)

2. 자식 component - props 받아오기

component의 파라미터로 props를 적어주고,
사용할 부분에서 props.{부모에서 전달한 이름}으로 사용한다.
props는 객체이기 때문에 객체의 속성을 꺼내오는 것처럼 사용하면 된다.

const BoardWriteUI = (props)=>{
		return(
			<Writer
				onChange = {props.propsName}
					/>
		)
}

emotion에서 props 받아오기

props를 활용하여 특정 행위가 일어난 경우 CSS를 변경할 수 있다.

/*Presenter - props 보내기*/
return (
		<Test isTrue={isTrue} onClick={handleOnClick}>클릭하면 색이 왔다 갔다</Test>
	);

/*emotion - props 받기*/
export const Test = styled.div`
	color: ${(props) => (props.isTrue ? 'red' : 'blue')};
`;