Props

#state (상태)
-살면서 변할수있는값
-컴포넌트의 사용중 컴포넌트 내부에서 변할수있는값 (외부의 영향을 받지않고)

-state는 컴포넌트내부에서 변화하는값, 외부의 영향을 받지않고
/ 나이, 현재사는곳, 취업여부, 결혼연애여부

 

<props>

-props는 외부로부터 전달받은값 
/이름, 성별

-컴포넌트의 속성(property)를 의미한다.
성별이나 이름처럼 변하지 않는 외부로부터 전달받은값으로, 웹애플리케이션에서 해당 컴포넌트가 가진 속성에 해당한다.
-부모 컴포넌트(상위컴포넌트)로부터 전달받은값이다.
props를 함수의 전달인자처럼 전달받아 이를 기반으로 화면에 어떻게 표시되는지를 기술하는 react엘리먼트를 반환한다.
따라서 컴포넌트가 최초 렌더링 될때 화면에 출력하고자 하는 데이터를 담은 초기값으로 사용할수있다.
-객체형태이다.
-읽기전용이다.
읽기전용객체가 아니라면 side effect가 생기게 되고 이는 react의 단방향, 하향식 데이터 흐름원칙에 위배된다.
-여러개 지정할수있다.
-props 속성의 이름을 임의로 지정해줄수있다.
꼭 text라고 안하고 item써도 적용된다.

 <Learn item={itemOne +" "+ itemTwo} />
<p>{props.item}</p>

 

---

#사용하는방법
1.하위 컴포넌트에 전달하고자 하는 값(data)과 속성을 정의한다. // text라는 속성을 선언. 이속성에 "I'm the eldest child"라는 문자열 값을 할당.
2.props를 이용하여 정의된 값과 속성을 전달한다.
3.전달받은 props를 렌더링한다.   //props.text

import "./styles.css";

function Parent() {
return (
<div className="parent">
<h1>I'm the parent</h1>
<Child text={"I'm the eldest child"} />
 <Child />
 </div>
 );
}

function Child(props) {
 return (
 <div className="child">
 <p>{props.text}</p>
 </div>
 );
}

export default Parent;

#props.children 방법도 있다
여는태그와 닫는태그 사이에 value를 넣어 전달하는 방법이 있다.

function Parent() {
 return (
 <div className="parent">
 <h1>I'm the parent</h1>
 <Child>I'm the eldest child</Child>
 </div>
 );
};

function Child(props) {
return (
<div className="child">
<p>{props.children}</p>
</div>
 );
};

---

import "./styles.css";

const App = () => {
const itemOne = "React를";
const itemTwo = "배우고 있습니다.";

return (
<div className="App">
<Learn text={itemOne +" "+ itemTwo} />
<Learn />
</div>
);
};

const Learn = (props) => {
return <div className="Learn">
<p>{props.text}</p>
</div>;
};

export default App;