[React] 유데미 React 강의 복습노트 #2

zero_0·2022년 3월 24일

JSX React

FE 학습

목록 보기

20/22

React는 자바스크립트 라이브러리이다.

1) 프레임워크 : 원하는 기능 구현에 집중하여 개발할 수 있도록 필요한 기능을 갖추고 있는 것, 일정한 형태를 가지고 다양한 형태의 결과물을 만드는 것

2) 라이브러리 : 소프트웨어를 개발할 때 프로그래밍 사용하는 비휘발성 자원의 모임, 공통으로 사용될 수 있는 특정한 기능들을 모듈화한 것

어플리케이션의 제어 흐름의 권한을 누가 가지고 있느냐가 핵심입니다.

React는 위와 같이 프로그램 흐름의 기본적인 틀은 정해져 있습니다.
하지만 앱 실행시 render() 함수는 입력이 필수이지만 componentDidMount() 함수는 자동으로 생성되지만 개발자가 명시적으로 입력해 줄 필요는 없습니다.

하지만 개발자가 API를 호출하거나 다른 작업을 수행하기를 원할 때, componentDidMount()를 통해 프로그램을 추가적인 동작을 정의할 수 있습니다.
이처럼 프로그램 흐름에 작업을 추가하거나 그렇게 하지 않음으로서 프로그램의 흐름을 바꾸는 것이 가능하기 때문에 React가 라이브러리인 것

출처: https://canoe726.tistory.com/23 [All-in-one]

React Core Syntax와 JSX란?

React를 사용하는 이유는 사용자 인터페이스를 만드는 과정을 단순화해준다. 에러가 덜 발생한다. 따라서 좀 더 중요한 비즈니스 로직에 집중할 수 있다. 일을 단순화하기 위해서 컴포넌트라는 개념을 쓴다.

Components

모든 사용자 인터페이스가 결국엔 컴포넌트로 구성된다.
재사용할 수 있는 빌딩 블록인셈.

WHY?

재사용이 가능하다. 반복을 피하게 한다.
우려사항을 분리할 수 있다. 코드를 관리할 수 있는 작은 규모로 유지할 수 있다.

요약) 리액트는 컴포넌트로 구성되고, HTML+CSS+JavaScript를 합쳐서 컴포넌트를 만들 수 있다.

리액트는 선언 접근 방식을 사용한다.

선언 접근 방식으로 컴포넌트를 만든다.
리액트에서 특정 html요소가 UI의 특정 장소에 만들어지고 삽입되도록 할 수 없다. 바닐라 자바스크립트로는 할 수 있다.
Declarative Approach _ 선언 접근 방식이란?

리액트가 선호하는 타겟을 정한 뒤 책임지고 실제 돔 지시를 생성하고 실행한다.

바닐라 자바스크립트에서는 아래처럼 명령형 접근법을 따른다.
단계별 지시임. 모든 지시를 일일이 적는 건 참 성가시다~

function App() {
  const para = document.createElement('p');
  para.textContent = 'This is also visible';
  document.getElementById('root').append(para);
}

리액트에서는 이렇게 선언 접근 방식으로 깔끔하게 사용 가능.
리액트로는 최종 상태를 정의할 수 있다. 알아서 지시를 생성해서 이걸 화면으로 가져온다. 편-안

function App() {
  return (
    <div>
      <h2>Let's get started!</h2>
      <p>This is also visible!</p>
    </div>
  );
}

export default App;

Working with Components

App.js 컴포넌트도 특별한 컴포넌트다.
앱에서의 역할을 보자면 루트 컴포넌트가 된다.
모든 컴포넌트는 App.js에 내포되거나 컴포넌트에 내포된다.
결국에는 컴포넌트 트리를 만들게 됨.

🎇props

컴포넌트를 재사용할 수 있도록 하고 이 컴포넌트에서 다른 컴포넌트로 데이터를 보낼 수 있도록 한다.

우리는 매개변수를 사용해서 데이터를 함수로 보낸다. 리액트도 비슷함
하지만 여기선 하나의 매개변수를 사용한다.

리액트는 하나의 매개변수를 모든 컴포넌트에서 쓸 수 있도록 한다. 그리고 그 하나의 매개변수는 객체가 된다.
이 모든 과정이 props 라고 할 수 있다.
보통 props라고 이름지으면 이게 객체라는 걸 알아차리기 쉽다.
props 객체에는 키 밸류 쌍이 있다. 리액트가 자동으로 보낸 것임.

필요한 데이터는 모두 컴포넌트 외부에서 받게 된다. 따라서 컴포넌트 안에서 정의할 필요가 없어짐
대신 App.js에서 정의 되어 ExpenseItem으로 보내진다.
(속성을 통해 ExpenseItem을 다르게 쓰기 위함)

App.js

import ExpenseItem from "./components/ExpenseItem";

function App() {
  const expenses = [
    {
      id: 'e1',
      title: 'Toilet Paper',
      amount: 94.12,
      date: new Date(2020, 7, 14),
    },
    { id: 'e2', title: 'New TV', amount: 799.49, date: new Date(2021, 2, 12) },
    {
      id: 'e3',
      title: 'Car Insurance',
      amount: 294.67,
      date: new Date(2021, 2, 28),
    },
    {
      id: 'e4',
      title: 'New Desk (Wooden)',
      amount: 450,
      date: new Date(2021, 5, 12),
    },
  ];

  return (
    <div>
      <h2>Let's get started!</h2>
      <ExpenseItem
        title={expenses[0].title}
        amount={expenses[0].amount}
        date={expenses[0].date}>
      </ExpenseItem>
      <ExpenseItem
        title={expenses[1].title}
        amount={expenses[1].amount}
        date={expenses[1].date}>
      </ExpenseItem>
      <ExpenseItem
        title={expenses[2].title}
        amount={expenses[2].amount}
        date={expenses[2].date}>
      </ExpenseItem>
      <ExpenseItem
        title={expenses[3].title}
        amount={expenses[3].amount}
        date={expenses[3].date}>
      </ExpenseItem>
    </div>
  );
}

export default App;

ExpenseItem.js

import './ExpenseItem.css';

function ExpenseItem(props) {
  return (
    <div className="expense-item">
      <div>{props.date.toISOString()}</div>
      <div className="expense-item__description">
        <h2>{props.title}</h2>
        <div className="expense-item__price">${props.amount}</div>
      </div>
    </div>
  );
}

export default ExpenseItem;