props

props

• 부모 컴포넌트 로부터 받아온 데이터
• 부모 -> 자식 방향으로만 전달이 가능하다.

function App() {
  return <GrandFather />;
}

function GrandFather() {
  return <Mother />;
}

function Mother() {
  const name = '묭이';
  return <Child />;
}

function Child() {
  
  return <div>연결 성공</div>;
}

위 코드에서 Mother 에 있는 name값을 가져오고 싶으면 아래와 같이 props를 사용하자.

function App() {
  return <GrandFather />;
}

function GrandFather() {
  return <Mother />;
}

function Mother() {
  const name = '묭이';
  return <Child motherName={name} />;
}

function Child(props) {
  console.log(props);
  return <div>연결 성공</div>;
}

console에 props를 찍어보면 결과는 아래와 같다.

한번 화면에 출력되게 작성해보겠다.

function App() {
  return <GrandFather />;
}

function GrandFather() {
  return <Mother />;
}

function Mother() {
  const name = '묭이';
  return <Child motherName={name} />;
}

function Child(props) {
  console.log(props);
  return <div>{props.motherName} 연결 성공</div>;
}

// 출력결과 : 묭이 연결 성공

이제 GrandFather의 이름을 받아와보겠다.

function App() {
  return <GrandFather />;
}

function GrandFather() {
  const name='묭묭이'
  return <Mother grandFatherName={name} />;
}

function Mother(props) {
  return <Child grandFatherName={props.grandFatherName} />
}

function Child(props) {
  return <div>{props.grandFatherName} 연결 성공</div>;
}
  
// 출력결과 : 묭묭이 연결 성공

---

props 구조분해할당으로 받기

위 코드에서 grandFatherName 은 묭묭이 가 있는 객체로 되어있다.
아래와 같이 원래는 props가 들어가야 할 자리에 객체로 해당 props객체의 이름을 넣어주고 return쪽에도 props객체의 이름을 넣어준다.

function App() {
  return <GrandFather />;
}

function GrandFather() {
  const name='묭묭이'
  return <Mother grandFatherName={name} />;
}

function Mother(props) {
  return <Child grandFatherName={props.grandFatherName} />
}

function Child({grandFatherName}) {
  return <div>{grandFatherName} 연결 성공</div>;
}
  
// 출력결과 : 묭묭이 연결 성공
// 이렇게 grandFatherName을 바로 넣어주면 된다.

---

children으로 props 받기

Layout 이라는 컴포넌트를 만들 때 자주 쓰인다.

function App() {
  return <User>안녕하세요.</User>
}

function User(props) {
  return <div>{props.children}</div>
}

예를들어 레이아웃 컴포넌트를 만들고 그 안에 들어오는 값들은 전부 동일한 스타일을 주고싶다면, 레이아웃 컴포넌트 하나만 작성을 해두고, 그 안에 children으로 값을 주입하면서 레이아웃 컴포넌트를 활용할 수 있다고 한다.
근데 무슨말인지 잘 모르겠지만 네이버같은경우 연합뉴스나 카드형식의 레이아웃같이 반복되는 스타일을 적용해야되는 때가 오면 children 방식으로 작성한다는 것 같다.

---

defaultProps

• 자주 받거나, 무조건 받아야 하는 props가 있을 경우 사용

만약 로그인이 완료되기 전까지 내 이름을 받아오지 않는데
"빈칸 님 안녕하세요!" 이런식으로 되면 매우 어색해질 것 같다.
이 경우 부모 컴퍼넌트가 props를 주기 전에도, Default props를 지정하여 값을 보여줄 수 있게 된다.
default props는 child에서 직접 설정해줄 수 있다.

function Child({ name }) {
  return <div>내 이름은 {name} 입니다. </div>
}
Child.defaultProps = {
  name: "기본 이름"
}

이런식으로 지정을 해주면, 부모 컴퍼넌트에서 props가 내려오기 전까지는 이 defaultprops의 값을 이용한다.
(부모컴퍼넌트에서 props가 내려오면 내려온 props의 값으로 대체된다.)