[스파르타 _ 리액트 과정] 26일차

et Ji·2022년 12월 5일

구조분해할당 내배캠 리액트 리액트 입문 스파르타 코딩클럽

TIL

목록 보기

31/40

📅 학습 일자 : 22. 12. 05

📜 진행 내용

[과제] 알고리즘 문제 풀기
- 오늘부터 과제로 1일 1문제씩 주어진다. 권장 문제 풀고 추가로 더 풀기.
[특강] JS 자주 사용 되는 ES6 문법 살펴보기
[강의] 자바스크립트 심화
- Chap-04. callback
  
  🚩 학습 목표
- Chap-04. 개념 이론에 익숙해지기
[강의] 리액트 입문주차
- 1 ~ 13까지 수강
  - 내용 : 시작하기 ~ component, JSX 문법, props, state

💡 배운내용

▣ 알고리즘 문제 풀기

문제를 풀다가 구조분해할당 복습이 필요했는데, 마침 오늘 진행될 JS 문법 특강시 내용이 포함되어있다.
듣고 정리하기.

▣ 자바스크립트 심화

실행 컨텍스트

▣ JS - 유용한 ES6 문법

객체

변수에 할당한 값을 오브젝트의 key값으로 설정하는 법

변수명을 오브젝트에서 [ ] 로 감싸면, 변수명에 할당된 변수가 key값이 된다.

**const a = 'age';**

const obj1 = {
  id : 1,
  name : 'momo',
  'my name' : '모모미',
  **[a] : 3, 
	// a가 key값이 되는게 아니라, 변수 a에 할당된 'age' 가 key값이 된다.** 
}

console.log(obj1)
// {id: 1, name: 'momo', my name: '모모미', **age: 3**}

배열의 구조분해 할당

const arr1 = [1, '모모', 3];

> 변수에 하나씩 할당
const myId = arr1[0];
const myName = arr1[1];
const myAge = arr1[2];

console.log(myId)
console.log(myName)
console.log(myAge)

> 구조분해할당으로 간견할게 할당
const [myId, myName, myAge] = arr1

console.log(myId
console.log(myName)
console.log(myAge)

** 필요한 부분만 꺼내오는 것도 가능하다. 
(기본적으로 필요하지 않아도 기재를 해주되, 정말 필요없을 경우
없다는 의미로 **'_' 언더바 기호를 사용해서 표기**한다. )

const [myId, _, myAge] = arr1

객체의 구조분해 할당

const obj = {
id: 1,
name: '모모',
age: 25,
habit: 'coding',
};

> 변수에 하나씩 할당
const name = [obj.name](http://obj.name/);
const id = [obj.id](http://obj.id/);
const age = obj.age;
const habit = obj.habit;

> 구조분해할당으로 간견할게 할당
const { name, id, age, habit } = obj;

console.log(name)
console.log(id)

** 필요한 부분만 꺼내오는 것도 가능하다. 
const { id, habit } = obj;

▣ 리액트 입문 강의

리액트 시작하기
프로젝트 세팅

07. Props Part1

props란 ?

컴포넌트 간의 정보를 교류하기 위한 수단
자식 컴포넌트가 부모 컴포넌트로부터 받아온 데이터묶음

props는 부모에서 자식 방향으로만 전달할 수 있다.

예제 ) props로 값 전달하기



import React from "react";

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

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

function Mother() {
	const name = '정숙씨';
  **return <Child motherName={name} />; // Child 컴포넌트에 props로 name을 전달했다.**
}

function Child(**props**){
	console.log(props) // {motherName: '정숙씨'}
	return <div>연결 성공</div>
}

export default App;

예제 ) props로 받은 값을 화면에 렌더링하기

// src/App.js

import React from 'react';

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

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

function Mother() {
  const name = '정숙씨';
  return <Child motherName={name} />;
}

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

export default App;

props Drilling > 내용 보강하기
- React에서 props로 컴포넌트간 데이터를 전달할 때 해당 데이터가 필요없는 컴포넌트에도 어쩔 수 없이 데이터가 전달해주어야 할 때가 있다. 위 그림에서 컴포넌트 A의 데이터를 컴포넌트 C로 전달하기 위해선 사이에 있는 컴포넌트 B를 거쳐야하는 것처럼 말이다. 이것이 Props Drilling(혹은 Threading)이다.

해결방법
- children : layout component를 만들 때 자주 사용.

          import React from 'react';

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

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

PropTypes와 함께 하는 타입 검사 > 내용 보강하기
- 앱의 크기가 커짐으로써 늘어나는 버그를 잡기 위해, 타입 검사 기능을 활용할 수 있다.

    import PropTypes from 'prop-types';
    
    class Greeting extends React.Component {
      render() {
        return (
          <h1>Hello, {this.props.name}</h1>
        );
      }
    }
    
    Greeting.propTypes = {
      name: PropTypes.string
    };