React - 2

💙컴포넌트

리엑트에서 "UI 조각"을 만드는 단위이다.
버튼, 헤더, 프로필 카드, 페이지 등 하나의 화면 요소를 만드는 함수이다.

• 함수로 UI를 만든다.
• 데이터(props)를 입력받아 View(state) 상태에 따라 DOM Node(UI)를 출력하는 함수이다.
• UI를 재사용 가능한 개별적인 여러 조각으로 나누고, 각 조각을 개별적으로 나누어 코딩한다.

// 텍스트 생성 함수
function sayHello(name) {
  return `안녕, ${name}`;
}

// 텍스트 대신 UI (화면 요소)를 생성 
function Hello(props) {
  return <h1>안녕, {props.name}</h1>;
}

// 사용
<Hello name="chori" />

// 브라우저에 출력된 모습
<h1>안녕, chori</h1>

예제

// HTML
<div class="profile">
  <img src="profile.jpg" />
  <h2>chori</h2>
</div>

// 리액트 컴포넌트
// Profile.js
import React from 'react';

const Profile = () => {
  return (
    <div className="profile">
      <img src="profile.jpg" />
      <h2>chori</h2>
    </div>
  );
};

export default Profile;

// 위의 Profile.js 컴포넌트를 다른 곳에서 사용 아래처럼 사용 가능하다.
import Profile from './Profile';

const App = () => {
  return (
    <div>
      <h1>내 페이지</h1>
      <Profile />
    </div>
  );
};

컴포넌트 사용 이유

1. 화면을 쪼개서 관리하기 쉽다.
   옛날 방식
   HTML / CSS / JS 를 한꺼번에 섞어 쓰기 -> 복잡, 유지보수 힘듦

   리액트
   화면을 기능 단위로 나눠서 관리
   `헤더, 버튼, 게시글, 댓글 을 각각 컴포넌트
   -> 재사용할 수 있다.

2. 재사용이 쉽다.
   한 번 만든 컴포넌트를 여러 곳에서 반복해서 쓸 수 있다.
   
   같은 UI 틀을 여러 데이터에 맞게 쓸 수 있어 효율적이다.

3. 코드 가독성을 올려준다.
   입력 -> 출력 구조가 돼서 읽고 이해하기 쉽다.
   

4. 상태(state)나 이벤트도 함수 안에서 처리 가능
   

   UI + 동작 + 데이터 상태를 한 함수(컴포넌트) 안에서 처리 가능해서 기능 단위로 정리할 수 있다.

💙props

컴포넌트에 전달하는 값(데이터)

부모 컴포넌트가 자식 컴포넌트에게 데이터를 넘겨줄 때 사용한다.
props의 값은 리액트 컴포넌트가 엘리먼트를 생성하기 위해 사용하는 값으로 읽기 전용이다.
-> 수정 불가, 항상 같은 값 유지
다른 props의 값으로 엘리먼트를 생성하려면 새로운 값을 컴포넌트에 전달하여 새로 엘리먼트를 생성한다.

// 부모
function App() {
  return (
    <div>
      <Greeting name="chori" />
    </div>
  );
}

// 자식
function Greeting(props) {
  return <h1>안녕, {props.name}!</h1>;
}

// 결과
// 안녕, chori!

// 구조 분해 가능 ( 객체나 배열에서 값만 깔끔하게 꺼내는 문법)
function Greeting({ name }) {
  return <h1>안녕, {name}!</h1>;
}

// 컴포넌트 재사용 가능
<Greeting name="철수" /> // 안녕, 철수!
<Greeting name="영희" /> // 안녕, 영희!

💙클래스 컴포넌트

클래스 컴포넌트

class 키워드로 정의하는 컴포넌트로 state 기능 및 라이프사이클 기능을 사용할 수 있고 임의 메서드를 정의할 수 있다.
render 함수가 꼭 있어야 하고, 보여줘야할 JSX를 반환해야한다.
React에서 재공하는 Component라는 클래스를 상속해서 만들 수 있다.

Class 에는 상태, 데이터를 담을 수 있는 state 라는 오브젝트가 들어있다. state의 내용이 업데이트 될 때마다 render 함수가 호출되며 업데이트된 내용을 보여준다.
라이프 사이클에 따라 함수를 구현해 놓고 리액트가 이걸 자동으로 실행시킨다.

import React, { Component } from 'react';

class MyComponent extends Component {
  render() {
    return <h1>안녕하세요!</h1>;
  }
}

// props도 this.props로 접근
class Hello extends Component {
  render() {
    return <p>안녕하세요, {this.props.name}님!</p>;
  }
}

state

컴포넌트 내부에서 관리되는 데이터로, 사용자의 동작이나 이벤트 등에 따라 변할 수 있는 값이다.

// 버튼을 누를 때 마다 숫자가 바뀌는 경우
const [count, setCount] = useState(0);
// count 가 state

// state에 따라 유동적으로 변하는  UI
// state가 변하면 (사용자가 클릭하거나 체크 같은 상호작용 등등) 
// 그 값을 기반으로 자동으로 화면을 렌더링
<p>현재 숫자: {count}</p>


import React, { useState } from 'react';

function Counter() {
  const [count, setCount] = useState(0); // count 초기값은 0

  const increase = () => {
    setCount(count + 1);
  };

  return (
    <div>
      <p>현재 카운트: {count}</p>
      <button onClick={increase}>+1</button>
    </div>
  );
}

/*
useState(0) → 초기값은 0

count → 현재 상태 값

setCount → 새로운 값으로 상태를 변경

setCount()가 호출되면, 자동으로 컴포넌트가 다시 렌더링
*/

💙함수형 컴포넌트

장점

• 클래스형 컴포넌트보다 선언하기가 편하다
• 클래스형 컴포넌트보다 메모리 자원을 덜 사용한다.
• 프로젝트 완성하여 빌드 후 배포할 때에도 결과물의 파일 사이즈가 더 적다.

단점

state와 라이프사이클 API 사용이 불가하다.
-> Hook 기능이 도입되면서 해결

💙함수형 컴포넌트와 클래스형 컴포넌트 비교

💙컴포넌트 이름

항상 대문자로 시작해야한다.

💙state

리액트 컴포넌트의 상태
리액트 컴포넌트의 변경 가능한 데이터(컴포넌트 내부에서 바뀔 수 있는 값)
클래스 컴포넌트의 경우 state를 생성자에서 정의(state 변경할 때는 setState()를 사용)
함수형 컴포넌트는 useState()라는 훅을 사용하여 정의

클래스형 컴포넌트에 state를 설정하는 경우 생성자(constructor) 메소드를 설정한다.
반드시 super(props)를 호출해줘야하고, 이 함수가 호출되면 현재 클래스형 컴포넌트가 상속받고 있는 리액트의 컴포넌트 클래스가 지닌 생성자 함수를 호출해 준다.

class Counter extends Component {
  constructor(props) {
    super(props); // 반드시 호출해야 함!

    // this.state 초기화
    this.state = {
      count: 0
    };
  }

  handleIncrement = () => {
    this.setState({ count: this.state.count + 1 });
  };

  render() {
    return (
      <div>
        <p>현재 카운트: {this.state.count}</p>
        <button onClick={this.handleIncrement}>+1</button>
      </div>
    );
  }
}

💙useState

React의 함수형 컴포넌트에서 상태(state)를 사용할 수 있게 해주는 Hook 이다.
컴포넌트 안에서 값을 저장하고 바뀔 때마다 자동으로 화면(UI) 다시 그리게 해주는 기능이다.

import React, { useState } from 'react';

function Counter() {
  // const [현재 상태 값, 상태를 변경하는 함수] = userState('초기값');
  // 초기값은 모든 자료형을 받을 수 있다.
  // 클래스형 컴포넌트는 항상 객체
  const [count, setCount] = useState(0); // 상태 변수 선언

  return (
    <div>
      <p>현재 카운트: {count}</p>
      <button onClick={() => setCount(count + 1)}>+1</button>
    </div>
  );
}

💗Todo

구조 분해 많이 써볼 것

익숙하지 않아서 읽어도 해석하기 어렵다.
예시를 만들라고 해도 작성하기 어렵다.