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

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;

이를 통해 리액트 컴포넌트 간에 데이터를 공유할 수 있고, 컴포넌트를 재사용하고 설정할 수 있는 것임.
props는 리액트에서 아주 중요한 개념!! 앞으로 계속 쓰게 될 테니 항상 기억해야한다.

실행시키면 이런 모습임