props

 

 

 

 

 

다른 컴포넌트에서 한 컴포넌트로 html 코드의 결과값에 직접 접근할 수 없다.

다른 컴포넌트에 저장 된 데이터를 다른 컴포넌트로 직접 보낼 수 없다.

 

 

 

 

props로 가능하다.

 

✔️ 리액트의 컴포넌트는 html 요소처럼 속성을 가질 수 있다.

이 속성을 props라고 부르며, 직접 설정할 수 있다.

props를 컴포넌트에 추가해서 다른 컴포넌트에 데이터를 전달할 수 있다.

전달 받은 컴포넌트는 바깥 컴포넌트에서 props를 통해 유저가 원하는대로 설정될 수 있다.

✔️ 데이터를 전달하는 컴포넌트는 '밖/상위컴포넌트', 전달받는 컴포넌트는 '안/하위컴포넌트'이다.

 

 

 

 

 

props를 만드는 방법

---

html 요소의 속성처럼, 컴포넌트 태그 안에 / 속성 = {값} / 의 형태로 만든다.

값에는 외부 컴포넌트의 변수가 들어갈 수 있다.

function App() = { 

	const itemList = [
	 {
     id: 0,
     title: 'tomato',
     amount: 1,000,
     },
     {
     id: 1,
     title: 'tomato soup',
     amount: 900,
     },
     {
     id: 2,    
     title: 'tomato salad',
     amount: 1,000,000,
     },
	]


return (
	<div>
    	<h2>Menu</h2>
        <MenuItem title={itemList[0].title}   // App(외부)컴포넌트 -> MenuItem(내부)컴포넌트 props 전달
          	 amount={itemList[0].amount}
        ></MenuItem>
        <MenuItem title={itemList[1].title}
          	 amount={itemList[1].amount}
        ></MenuItem>
        <MenuItem title={itemList[2].title}
          	 amount={itemList[2].amount}
        ></MenuItem>
    </div>
)
}

 

 

✔️ 컴포넌트 외부에서 props로 전달하는 속성들은, props라는 객체에 키, 값으로 담긴다.

...
return (
	<div>
    	<h2>Menu</h2>
        <MenuItem title={itemList[0].title} // tomato
          	 amount={itemList[0].amount} // 1,000
        ></MenuItem>
...
    </div>
)

예를 들어 위 코드의 경우, <MenuItem> 컴포넌트에서 받는 props에

title, amount를 키로 하는 '밸류'가 들어 있다.

 

 

 

 

 

✔️ props는 외부로부터 전달 받은 '읽기 전용' 값이다.

수정이 가능하다면, React의 단방향, 하향식 데이터 흐름 원칙에 위배된다.

(반면, state는 컴포넌트 안에서만 관리되며, 컴포넌트 안에서 변화하는 값)

모든 React 컴포넌트는 자신의 props를 다룰 때 반드시 순수 함수처럼 동작해야 합니다.
물론 애플리케이션 UI는 동적이며 시간에 따라 변합니다. React 컴포넌트는 state를 통해 위 규칙을 위반하지 않고 사용자 액션, 네트워크 응답 및 다른 요소에 대한 응답으로 시간에 따라 자신의 출력값을 변경할 수 있습니다.

 

 

 

 

 

props 사용하기

---

전달받은 컴포넌트에서 props의 이름을 임의로 지정해서 사용할 수 있다. 나는 data라고 했다.

function MenuItem(data) { // 나는 props 대신 data라는 이름을 썼다

	return (
    	<div>
        	<h2>{data.title}</h2> 
            <div>{data.amount}</div>
        </div>
    )
    
}

 

 

부모 컴포넌트에서 자식 컴포넌트 태그 사이에 value를 넣어 전달하기도 한다. (props.children)

//부모 컴포넌트에서 자식 컴포넌트 태그 사이에 value를 넣어 전달하는 방법
function Parent() {
  return (
    <div className="parent">
        <h1>I'm the parent</h1>
        <Child>I'm the eldest child</Child> // 자식 컴포넌트 사이에 value를 써줌
    </div>
  );
};

function Child(props) {
  return (
    <div className="child">
        <p>{props.children}</p> //자식 컴포넌트에서 {props.child}로 사용
    </div>
  );
};

 

 

 

리액트에서는 이런 방법으로 데이터를 전달할 수 있다,

재사용 가능한 컴포넌트가 만들어진다.

props가 없었으면 위의 MenuItem 컴포넌트에서 title과 amount 값을 하드코딩 해야한다. (재사용 가능)

 

 

 

 

 

 

 

 

✔️ 하위 컴포넌트에 props로 함수를 전달해서 사용할 수 있다.

 

✔️ props drilling

Prop drilling is the unofficial term for passing data through several nested children components, in a bid to deliver this data to a deeply-nested component. The problem with this approach is that most of the components through which this data is passed have no actual need for this data.

redux , MobX , recoil 등을 사용하여 해당 값이 필요한 컴포넌트에서 직접 불러서 사용할 수 있습니다.

 

 

 

✔️ 하위 컴포넌트에 props로 setState 함수를 전달해서 사용할 수 있다.

과제에서 항상 사용하고 있음.

 

 

 

 

 

 

 

 

 

---

props 사용 방법 요약

• state가 컴포넌트 안에서만 관리되는 반면, props는 인수처럼 (자식)컴포넌트에 전달된다.
• 부모 컴포넌트에 들어온 자식 컴포넌트 태그에 props(속성)를 만들어 주고,
• 자식 컴포넌트에서 (props)로 받아와서 해당 속성을 사용하면 된다.
• props의 이름은 꼭 props가 아니어도 된다.