[ react , nextJS ] 리액트 컴포넌트 - props 와 children

리액트 컴포넌트가 가진 props, state 개념에 대해 알 필요가 있다. 

 

props는 컴포넌트 외부에서 받을 수 있는 값, 부모로부터 자식에게 단방향 데이터 흐름 구조를 가진다. 

 

부모-자식 컴포넌트가 아닌데 데이터를 전달해야하는경우, context를 사용한다. props쓰기 않고도 컴포넌트 사이에 데이터를 전달할 수 있다. 

state는 내부에서 저장하는 데이터이다. 반드시 해당 컴포넌트 자신과 그 하위에만 영향을 미친다. 

---

const [count, setCount] = useState(0)

1. make prop, give it a value

< Greeting text={'yo'}/>

 

2. Use prop value

function Gretting(props){

return <h1>{props.text}</h1>

}

*props는 오브젝트임,다른 컴포넌트들에서 값을 받을 수 있음.

 

prop에는 아무거나 파싱할 수 있다. 

children prop -

<Parent /> -> expand tags

<Parent>

  <Child /> -- 이것이 children이다. 

</Parent>

 

function (Parent(props)){

return <div>{props.children}</div>

}

 

children props는 layout components에서 유용하게 쓰임

 

 

 

예시코드

<p>요소가 {CHILDREN}에 전달된다. 

훅을 사용해서 변경할 수 있는것은 다음에 살펴보겠다. 

 

---

//Container는 빨간 박스안에 제목과 자식 요소를 표시한다. 
const Container = (props: {title: string; children: React.ReactElement }) => {
const { titme, children } = props

return (
<div style={{ background:red}}>
<span>{title}</span>

<div>{children}</div>

</div>
)
};

const Parent = () => {
return (
<Container title='Hello'>
<p>배경으로 둘러쌓인 부분</p>
</Container>
)
}

export default Parent;