Props

컴포넌트가 여러개로 분리가 되면 데이터와 기능의 연결고리가 끊어지게 됩니다. 이를 연결해 주는 것이 Props입니다. Props 란 부모 컴포넌트가 자식 컴포넌트에게 물려주는 변수 / 함수 를 뜻합니다.

부모 컴포넌트가 Props를 물려줄때는 객체로 묶어서 넘기게 됩니다.

prpos 내려주기 (부모 컴포넌트)

//부모 컴포넌트 부분

const BoardWrite = ()=>{
		const [writer, setWriter ] = useState()
		const handlechangeWriter = (e)=>{
					writer = e.target.value
					setWriter(writer)
					}

	return(
		// 자식 컴포넌트로 props 내려주기
		<BoardWriteUI propsName={handlechangeWriter} writer={writer}/>
	)
}

위와 같이 코드를 작성했을 때

props = {propsName: handlechangeWriter, writer: writer}

라는 객체로 묶여져 자식 컴포넌트에게 넘어갑니다. 따라서 자식 컴포넌트에서 객체의 속성을 꺼내오는 것 처럼 사용할 수 있게 됩니다.

//자식컴포넌트 부분

//파라미터 부분에 props를 적어주셔야 받아 올 수 있습니다. 이름은 아무거나 상관없습니다
const BoardWriteUI = (props)=>{
		return(
			<Wrapper>
            	// props를 내려받는 부분입니다.
            	{props.writer}
				<Writer
					type = "text"
					placeholder = "작성자를 적어주세요"
					onChange = {props.propsName}
					/>
			</Wrapper>
		)
}

props의 문제점

리액트의 단방향 데이터 흐름

리액트는 데이터 흐름이 단방향 구조입니다.

데이터 흐름이 단방향 구조라는 것은 props는 부모가 자식에게만 줄 수 있으며, 자식이 부모에게 줄 수 없다는 것을 의미합니다.

리액트의 데이터 흐름이 단방향 구조이기때문에 우리가 에러를 캐치하기가 더 쉽고, 보기에 더 깔끔합니다.

Props driling

Prop Drilling 은 props를 오로지 하위 컴포넌트로 전달하는 용도로만 쓰이는 컴포넌트들을 거치면서 React Component 트리의 한 부분에서 다른 부분으로 데이터를 전달하는 과정입니다.

우선 Prop Drilling 는 문제가 되지 않습니다. prop 전달이 3~5개 정도의 컴포넌트라면 말이죠.

하지만 prop 전달이 10개, 15개 같이 더 많은 과정을 거치게 된다면 어떻게 될까요? 코드를 읽을 때 해당 prop을 추적하기 힘들어집니다.

그렇기 때문에 유지보수도 더욱 어려워집니다.

이를 방지하기 위해, 전역 상태관리 라이브러리 ( redux, Mobx, recoil ) 등을 사용하여 해당 값이 필요한 컴포넌트에서만 직접 호출해 사용할 수 있습니다.