props

컴포넌트에게 값을 전달하기

props 기본값

Hello.defaultProps={
	name: "이름",
  	message: "글자"
}
컴포넌트명.defaultPorps={
props명: 기본값
}

---

매개변수 props

<Hello props="green"/>
function Hello(props){
  {props} → green으로 출력됨
}

사용 예시

import Hello from './components/Hello';

function App() {
  return (
    <div className="App">
      <Hello name="1번" message="안녕1" />
      <Hello name="2번" message="안녕2" />
      <Hello name="3번" message="안녕3" />

    </div>
  );
}

export default App;

Hello 컴포넌트를 부르는 함수(App)이다. props로 name 및 message를 입력했다.

import React from "react";
function Hello({name,message}) {
	return(
		<>
			<div className="hello">{name}님 안녕하세요</div>
			<p>'{message}'</p>
		</>
	)
}
export default Hello;

Hello 라는 컴포넌트이다. 이런 구조로 작성된다.
{name,message}에는 App에서 작성된 값이 구조 분해 할당으로 작성 되어있다.

App와 Hello로 작성한 값은

1번님 안녕하세요
'안녕1'
2번님 안녕하세요
'안녕2'
3번님 안녕하세요
'안녕3'

jsx에서 함수를 이벤트로 실행시킬 때 매개변수값을 주고 싶다면
onClick={function(parameter)}가 아닌
onClick={()=>function(parameter)}으로 주어야한다.

---

type 주기

import PropsTypes from "prop-types";
Component명.propTypes={
	props명: PropsTypes.string.isRequired
}

type 종류

array : 배열
boolean : true / false
func : 함수
number : 숫자
string : 문자열
object : 객체
any : 모든 종류

---

조건부 랜더링

jsx에서는 if문을 사용할 수 없다. 대신 삼항연산자는 사용이 가능하다.

function App() {
  return (
    <div className="App">
        <Hello isSpecial/>
        <Hello isSpecial={true} />
        <Hello isSpecial={false} />
    </div>
  );
}

function Hello({isSpecial}) {
	return(
		<>
			{isSpecial ? <p>True</p> : <p>False</p>}
        	{isSpecial && <p>True입니다.</p>}
		</>
	)

Ture
Ture입니다.
Ture
Ture입니다.
False

함수 ? true일때 값 : false일때 값 은 삼항 연산자로 출력한 것이다.
함수 && 구문 : &&이 false를 만나면 null을 반환하는 것을 이용한 것이다.

---

childern

function App() {
  return (
    <div className="App">
      <Wrapper>
        <Hello />
        <Hello name="2번" message="안녕1" />
        <Hello name="3번" message="안녕2" />
      </Wrapper>
    </div>
  );
}

Hello 컴포넌트는 상태: 에서 작성된 것과 같다.

const Wrapper = ({children}) => {
	return (
		<div>
				<h2>children 공부</h2>
				{children}
		</div>
	);
};

Wrapper의 매개변수로 받은 {children}의 값은 안에 작성된 값이 된다.
→ 그의 자녀요소가 {children}으로 받아진다.

• 자녀요소는 children으로만 받아지기때문에, 이름을 바꾸면 안 된다!
• Wrapper는 const name = () => {}로 만들었지만, function name(){}으로 작성하는 것과 같은 컴포넌트이다.