React & TS 3회차 (7/9) | 프로젝트 셋업 방식, 서버 세팅, useEffect, 공식 문서 읽어보기, 이스케이프란 ?

hot module replacement

모듈 전체를 다시 로드하지 않고 애플리케이션이 실행되는 동안 교환, 추가 또는 제거함

실행 중인 상태의 코드의 변경 된 부분을 바꿔치기하는 것

 

copilot said ...

Hot Module Replacement(HMR)는 리액트 개발에서 코드가 변경될 때 페이지를 새로 고치지 않고도 변경된 내용을 바로 반영해주는 기능이에요.
이 기능 덕분에 개발자가 코드 수정 후 저장할 때마다 페이지를 새로고침하지 않아도 변경된 내용을 즉시 볼 수 있어요.
Vite는 기본적으로 HMR을 지원해요. 추가 설정 없이도 바로 사용할 수 있어요.

비유로 설명하기

한번 상상해보자. 네가 그림을 그리는 중이라고 생각해보자. HMR이 없다면, 색깔을 조금 바꿀 때마다 종이를 새로 갈아야 하는 상황이야. 매번 종이를 갈아야 하니 시간이 오래 걸리고 불편하지.
HMR이 있다면, 종이를 갈지 않고 바로바로 색깔을 바꿀 수 있는 거야. 그래서 그림을 그리면서 수정할 때마다 즉시 변경된 부분을 볼 수 있어서 훨씬 편리해져.

 

useEffect

리액트에서 함수형 컴포넌트가 특정 작업을 수행할 수 있게 해주는 도구

비유로 설명하기

useEffect를 집안일 목록이라고 생각해보자. 집안일 목록에는 매일 해야 할 일들이 적혀있어. 아침에 일어나서 이를 닦고, 밤에 자기 전에 불을 끄는 것처럼 말이야. useEffect는 컴포넌트가 특정 상황에서 해야 할 일을 정리해두는 역할을 해.

 

기본 사용법

 

1. 컴포넌트가 처음 렌더링될 때 한 번만 실행하기

useEffect(() => {
  console.log("컴포넌트가 처음 렌더링될 때 실행돼요!");
}, []);

 

빈 배열 []을 두 번째 인자로 주면, 이 효과는 컴포넌트가 처음 렌더링될 때 한 번만 실행됨

 

2. 특정 값이 변할 때마다 실행하기

useEffect(() => {
  console.log("count 값이 변경될 때 실행돼요!");
}, [count]);

 

배열 [count]을 두 번째 인자로 주면, count 값이 변할 때마다 이 효과가 실행됨

 

3. 청소 작업하기

useEffect(() => {
  console.log("컴포넌트가 렌더링될 때 실행돼요!");

  return () => {
    console.log("컴포넌트가 사라질 때 실행돼요!");
  };
}, []);

 

이 예제에서는 컴포넌트가 처음 렌더링될 때 코드가 실행되고, 컴포넌트가 사라질 때 청소 작업이 실행됨

 

- 간단한 데이터 가져오기 예제

import React, { useState, useEffect } from 'react';
// 리액트와 필요한 훅(useState, useEffect)을 가져옴

function DataFetcher() {
  const [data, setData] = useState(null);
  // useState를 사용해서 데이터를 저장할 상태 변수를 만듬
  // data는 가져온 데이터를 저장할 변수, 초기값 = null
  // setData는 data를 업데이트하는 함수

  useEffect(() => {
    // useEffect를 사용해서 컴포넌트가 처음 렌더링될 때 데이터를 가져오는 함수를 실행
    // useEffect = 특정 작업을 수행하도록 해주는 리액트 훅
    
    async function fetchData() {
    // 데이터를 가져오는 비동기 함수
      const response = await fetch('https://api.example.com/data');
      // 데이터를 요청하는 부분. 마치 친구에게 편지를 보내는 것처럼
      const result = await response.json();
      // 서버의 응답을 JSON 형식으로 변환하는 부분. 마치 친구의 답장을 읽는 것처럼
      setData(result);
      // setData(result)는 가져온 데이터를 상태 변수에 저장하는 부분
    }

    fetchData();
  }, []); // 빈 배열을 두 번째 인자로 주면 컴포넌트가 처음 렌더링될 때만 실행돼요

  return (
    <div>
      {data ? <pre>{JSON.stringify(data, null, 2)}</pre> : <p>Loading...</p>}
      // data가 null이면 데이터를 아직 가져오고 있는 상태이므로 “Loading…” 메시지를 보여줌
      // data가 있으면 데이터를 JSON 형식으로 출력
    </div>
  );
}

export default DataFetcher;

 

비유로 이해하기

상상해보세요. 제가 큰 도서관에서 책을 빌리고 싶다고 해요. 도서관 직원에게 책을 요청하면, 직원이 책을 찾아서 가져다 줄 때까지 기다려야 해요. 도서관 직원이 책을 가져다주면, 제가 그 책을 읽을 수 있는 거죠.

여기서, DataFetcher 컴포넌트는 책을 요청하는 역할을 하고, fetchData 함수는 도서관 직원이에요. 도서관 직원이 책을 가져다주는 동안 기다려야 하고, 책이 도착하면 그 책을 읽을 수 있는 것처럼, 데이터를 가져오는 동안 Loading... 메시지를 보여주고, 데이터가 도착하면 그 데이터를 화면에 보여주는 거예요.

 

 

리액트 문서 읽어보기

https://ko.react.dev/learn

빠르게 시작하기 – React

 

- 습관적으로 사용하는 단어들 의미 다시 생각해보기 (컴포넌트란 ? 데이터란 ?)

 

- 이스케이프는 뭐지 ?

JSX 어트리뷰트에서 따옴표 대신 중괄호를 사용하여 “자바스크립트로 이스케이프” 할 수도 있습니다. 예를 들어 className="avatar"는 "avatar" 문자열을 CSS로 전달하지만 src={user.imageUrl}는 자바스크립트 user.imageUrl 변수 값을 읽은 다음 해당 값을 src 어트리뷰트로 전달합니다.

 

< copilot said .. ! >

JSX란?

 

JSX는 리액트에서 사용하는 특별한 문법으로, HTML과 매우 비슷해 보여요. 리액트 컴포넌트 내에서 HTML을 작성할 수 있게 해줘요.

 

JSX 어트리뷰트에서 따옴표와 중괄호 사용하기

 

1. 따옴표:

• 따옴표는 문자열을 직접 전달할 때 사용해요.

• 예를 들어, className="avatar"는 "avatar"라는 문자열을 className 어트리뷰트로 전달해요.

• HTML에서 <div class="avatar">와 비슷해요.

<img className="avatar" />

 

2. 중괄호:

• 중괄호는 자바스크립트 표현식을 사용할 때 사용해요.

• 예를 들어, src={user.imageUrl}는 user.imageUrl이라는 자바스크립트 변수를 읽고, 그 값을 src 어트리뷰트로 전달해요.

• HTML에서 <img src="https://example.com/image.jpg">와 비슷해요.

(단, user.imageUrl이 "https://example.com/image.jpg" 값을 가지고 있을 때)

const user = {
  imageUrl: 'https://example.com/image.jpg'
};

<img src={user.imageUrl} />

 

비유로 설명하기

• 따옴표 사용:
레시피에 명확히 “소금 1큰술”이라고 적혀있으면, 그냥 소금 1큰술을 사용해요.
마찬가지로, className="avatar"는 “avatar”라는 문자열을 그대로 사용해요.

• 중괄호 사용:
레시피에 “설탕의 양은 설탕통에 적힌 대로 사용”이라고 적혀있으면, 설탕통에서 설탕의 양을 확인해서 사용해요.
마찬가지로, src={user.imageUrl}는 user.imageUrl 변수의 값을 가져와서 사용해요.

const user = {
  name: 'John Doe',
  imageUrl: 'https://example.com/johndoe.jpg'
};

// 따옴표를 사용하는 경우
// 여기서는 className에 "avatar"라는 문자열을 그대로 사용해요
<img className="avatar" />

// 중괄호를 사용하는 경우
// 여기서는 user.imageUrl 변수를 읽어서 그 값을 src에 사용해요
<img src={user.imageUrl} alt={user.name} />

 

“이스케이프”란?

 

여기서 “이스케이프”란, HTML 태그 내에서 자바스크립트 코드를 실행할 수 있도록 하는 것을 의미해요. JSX에서 중괄호 {}를 사용하면 자바스크립트 코드를 실행할 수 있는 “탈출구”를 제공해주는 거예요. 즉, 단순한 문자열 대신 자바스크립트 변수를 사용하거나, 자바스크립트 표현식을 사용할 수 있게 해주는 거죠.