React입문 1주차(Props 추출)

구조분해 할당과 Props

구조 분해 할당 통해 props 내부값 추출하기

 

1. 구조분해할당 해보기

// src/App.js

import React from "react";

function App() {

  // 객체 존재
  const testObj = {
    name: "mini",
    age: 28,
    company: "sparta"
  }

  // 새로운 변수 할당
  const { name, age, company } = testObj; // 해당 key의 이름을 가진 value들을 뽑아옴
  
  // value들이 출력됨
  console.log(name); // mini
  console.log(age);  // 28
  console.log(company);  // sparta


  return <div>App</div>
}

export default App;

 

2. props랑 childres props동시에 주기

import React from "react";

// Child라는 컴포넌트에 children props로 이름을 주기
function App() {
  return <Child>이름</Child>  
}
export default App;

import React from "react";

// Child컴포넌트에 props
function App() {

  const name = "test";

  return <Child age={21} name={name} />;
}

export default App;

▼

import React from "react";

// 두개를 동시에 props
function App() {

  const name="test";

  return <Child age={21} name={name}>이름</Child>;
}

export default App;

---

Child.js파일을 만들고, App.js에 Child를 import하고

// src/App.js

import React from "react";
import Child from "Child";

function App() {

  const name="test";

  return <Child age={21} name={name}>이름</Child>;
}

export default App;

// src/Child.js

import React from 'react'


// App.js에서 props한 데이터 받기
function Child(props) {
    console.log(props)

    return <div>Child</div>

}

export default Child

props한 데이터를 Child에서 잘 보여주고 있다.

 

---

여러개의 props를 받는다면, { } 안에 여러개의 props를 그대로 써주면 된다.

// src/Child.js

import React from 'react'

// App.js에서 props한 데이터 받기
function Child({age, name, Children}) {
    console.log(age);
    console.log(name);
    console.log(Children);
    return <div>Child</div>;
}
export default Child;

왜 children이 undefined인지 알 수 없네,,,,,,,,

---

defaultProps

defaultProps란, 부모 컴포넌트에서 props를 보내주지 않아도 설정될 초기 값을 말한다.

 

자주 받거나 또는 무조건 받아야 하는 props들을 defaultProps로 설정하면, 부모 컴포넌트로부터 아직 props 값을 받지 못했더라도 임시로 props의 값을 채울 수 있다. 

// src/App.js
import React from "react";
import Child from "Child";

function App() {
  const name = "test";

  return <Child name={name}>이름</Child>;  // age의 값이 없음
}

export default App;

// src/Child.js
import React from 'react';

function Child({age, name, Children}) {
    console.log(age);
    console.log(name);
    console.log(Children);
    return <div>Child</div>;
}

Child.defaultProps={
    age: "기본 나이",
};
// defaultProps로 설정해둔걸로 출력된다.

export default Child;

---

default Argument

매개변수가 지정되지 않았으면 자동으로 지정해줄 값을 정하라는 의미

function multiply(a, b = 1) {
  return a * b;
}

console.log(multiply(5, 2));
// Expected output: 10

console.log(multiply(5));
// Expected output: 5

---

JSX문법을 사용하는 파일이면 확장자명을 jsx로 해주기 js로 해도 다른건 없지만 좀 더 보기가 편한거 같다.