[React] Component , 구조 분해 할당

Component

: 다른 객체 ( 함수 ) 가져다 쓴다. => 객체로 만들어 놓고 필요 시 사용

import logo from './logo.svg';
import './App.css';
import { React } from 'react';

const user = {
  firstName : "Hong",
  lastName : "GilDong"
};

function  Student(user) {
  return user.firstName + " " + user.lastName;
}

function App() {
  const isStudent = true;
  return (
    <div className="App">
       <h1>Start React 2024_AddInEdu</h1>
       <h3>component 실습</h3>
       {isStudent? <h4>{Student(user)}님 환영합니다.</h4> : <h4>학생이 아닙니다.</h4>}
    <Com1></Com1>
    <Com1 />
    <Com1/>
    </div>
  );
}
function Com1() {
  return (
    <div>
          <h2>[THIS IS COMPONENT]</h2>
          <p>산대특</p>
          <p>글자</p> 
          <ul>
            <li>java</li>
            <li>oracle</li>
            <li>springboot</li>
            <li>react</li>
          </ul>
       </div>
  )
}
export default App;

 다른 파일에서 함수 생성

const MyHeader = () => {
    return <header>헤더영역</header>
}

export default MyHeader;   --> 꼭 해야 다른 곳에서 사용 가능🙂

App.js

import './App.css';
import MyHeader from './MyHeader';

function App() {
  return (
    <div className="App">
       <MyHeader/>   
    </div>
  );
}

export default App;

-----------------------------------------------------------------------------------------------------------------------------------------------------------------

  const func6 = function(num) {
        return function(value) {
            return num+value;
        }
    }

    let func6Num = func6(6);
    let result = func6Num(7);
    console.log(`func6Num : ${func6Num}`);
    console.log(`result : ${result}`);

    let result2 = func6(6)(7);

=> 화살표 함수로 변경

const func7 = num => value => num+value;
console.log(`func7 : ${func7(6)(7)}`);

 

구조 분해 할당

⇒ 각각의 변수에 담아주는 것을 의미한다.

• 배열 분해 할당

const points = [20, 30, 40];

  ES5

const x1 = points[0];
const y1 = points[1];
const z1 = points[2];

ES6

const [x2, y2, z2] = points;

두 번째 값 무시

두 번째, 세 번째 값 무시

=> 첫 번째 값만 넣기 ( 콤마가 없어도 되고, 여러 개여도 됨 )

배열보다 더 많은 변수가 있을 때 undefined

 

• 객체 분해 할당

const car = {
        model: 'k7',
        color: 'black', 
        year: 2024
    }

 ES5

const model = car.model;
const color = car.color;
const year = car.year;

ES6

const {model2, color2, year2} = car;

key 값이랑 동일한 이름이어야 한다. → 배열과 달리 순서 상관없음

만약 이름을 주고 싶다면 키 : 값을 넣어준다.

========== > 객체를 매개변수로 받음과 동시에 분해 할당