[React] 리액트 기초 정리

리액트의 특징

1.컴포넌트 기반 구조: 리액트는 UI를 독립적이고 재사용 가능한 여러 단위(컴포넌트)로 나눕니다. 각 컴포넌트는 자신의 로직을 가지며, 이를 조합하여 복잡한 UI를 쉽게 만들 수 있습니다.

 

2.가상 DOM 사용: 리액트는 가상 DOM을 사용하여 실제 DOM과의 직접적인 상호작용을 최소화합니다. 컴포넌트의 상태가 변경될 때, 리액트는 가상 DOM에 먼저 변경을 적용하고, 이를 실제 DOM과 비교하여 실제로 변경이 필요한 최소한의 부분만을 업데이트합니다. 이 접근 방식은 애플리케이션의 성능을 크게 향상시킵니다.

 

3.단방향 데이터 흐름: 리액트에서 데이터는 항상 상위 컴포넌트에서 하위 컴포넌트로 흐르는 단방향 바인딩을 따릅니다. 이는 애플리케이션의 데이터 흐름을 예측 가능하고 이해하기 쉽게 만들어 줍니다.

 

4.JSX: 리액트는 JSX라는 XML과 유사한 문법을 사용하여 컴포넌트의 구조를 쉽게 작성할 수 있게 합니다. JSX는 HTML과 비슷하게 보이지만, 실제로는 JavaScript입니다. 이를 통해 개발자는 UI 구조를 직관적으로 설계할 수 있습니다.

 

5.리액티브 업데이트: 리액트는 컴포넌트의 상태가 변경될 때 자동으로 뷰를 업데이트합니다. 이는 애플리케이션의 상태 관리를 효율적으로 만들어 줍니다.

 

6.다양한 플랫폼 지원: 리액트 네이티브를 통해 모바일 앱 개발에도 리액트를 사용할 수 있습니다. 이를 통해 웹과 모바일 애플리케이션을 동일한 리액트 컴포넌트를 사용하여 개발할 수 있습니다.

 

7.강력한 커뮤니티와 생태계: 리액트는 매우 활발한 커뮤니티와 광범위한 생태계를 가지고 있습니다. 수많은 오픈소스 프로젝트, 도구, 라이브러리가 리액트와 함께 사용될 수 있어 개발자가 애플리케이션을 더 효과적으로 구축할 수 있게 돕습니다.

 

리액트 18에서 달라진점

1.Concurrent Mode: 리액트 18은 Concurrent Mode를 정식으로 도입했습니다. 이는 리액트가 UI 렌더링 작업을 중단하고 필요에 따라 재개할 수 있게 함으로써 애플리케이션의 응답성과 성능을 크게 향상시킵니다. 특히, 사용자의 입력과 같은 중요 작업에 우선순위를 두어 처리할 수 있습니다.

2.Automatic Batching: 리액트 18은 이벤트 핸들러 내에서 발생한 상태 업데이트뿐만 아니라 프로미스, setTimeout, 네이티브 이벤트 핸들러 및 다른 이벤트에서 발생한 상태 업데이트도 자동으로 배치 처리합니다. 이는 불필요한 렌더링을 줄이고 성능을 향상시킵니다.

3.startTransition: 사용자 인터렉션이나 데이터 패칭으로 인한 UI 업데이트를 비동기적으로 처리할 수 있는 startTransition API를 도입했습니다. 이를 통해 긴급하지 않은 업데이트를 나중에 처리함으로써, 애플리케이션의 응답성을 유지할 수 있습니다.

4.새로운 루트 API: 리액트 18은 createRoot API를 도입하여 애플리케이션의 루트를 생성합니다. 이 새로운 API는 Concurrent Mode와 호환되며, 애플리케이션의 엔트리 포인트에서 사용됩니다.

5.useId Hook: 서버와 클라이언트 렌더링 간의 ID 일치 문제를 해결하기 위해 useId 훅이 도입되었습니다. 이는 SSR(Server-Side Rendering)과 클라이언트 사이드 렌더링에서 안정적인 고유 ID를 생성합니다.

6.Suspense for Server-Side Rendering (SSR): 리액트 18은 서버 사이드 렌더링에서 Suspense를 지원합니다. 이를 통해 데이터 로딩 상태를 더 세련되게 처리할 수 있으며, 클라이언트 측에서 데이터 패칭을 기다리는 동안 로딩 상태를 보다 쉽게 관리할 수 있습니다.

 

jsx의 기본 규칙 

1.태그는 반드시 닫혀야 합니다.
   -자체적으로 닫는 태그는 /를 사용해 닫아야 합니다. 예: <img src="image.jpg" />
2.JSX 내에 JavaScript 표현식을 사용할 수 있습니다.
   -{}를 사용하여 JavaScript 표현식을 포함할 수 있습니다.
3.요소는 반드시 하나의 부모 요소 안에 포함되어야 합니다.
   -여러 요소를 반환할 때는 하나의 요소로 감싸야 합니다. Fragment(<></>)를 사용할 수 있습니다.
4.JSX 태그에서 속성을 지정할 때는 camelCase를 사용합니다.
   -HTML에서는 class, for 같은 속성을 사용하지만, JSX에서는 className, htmlFor를 사용합니다.
5.조건부 렌더링은 삼항 연산자 또는 && 연산자를 사용하여 표현할 수 있습니다.

 

-예제-

function App() {
  const name = 'React';
  const isLoggedIn = true;
  return (
    <div>
      <h1>안녕하세요, {name}</h1>
      {isLoggedIn ? (
        <p>{name}에 로그인 되었습니다.</p>
      ) : (
        <p>로그인이 필요합니다.</p>
      )}
      <img src="logo.png" alt="로고" />
    </div>
  );
}

리액트에서 렌더링의 정의 및 초기 렌더링과 리렌더링의 차이점

리액트에서 렌더링은 컴포넌트의 상태(state)나 속성(props)이 변경될 때, 해당 컴포넌트의 UI를 업데이트하는 과정을 말합니다. 즉, 컴포넌트의 출력을 화면에 표시하는 과정입니다. 렌더링 과정에서 React는 가상 DOM을 사용하여 실제 DOM에 반영하기 전에 변경 사항을 효율적으로 계산합니다.

초기 렌더링

초기 렌더링은 리액트 애플리케이션이 처음으로 화면에 UI를 그리는 과정입니다. 이 과정에서 각 컴포넌트는 처음으로 render 메소드를 실행하게 되며, 이를 통해 가상 DOM에 컴포넌트의 초기 상태가 반영됩니다. 초기 렌더링은 애플리케이션의 생명 주기에서 단 한 번만 발생하며, 이후 상태나 속성의 변화에 따라 리렌더링이 이루어집니다.

리렌더링

리렌더링은 컴포넌트의 상태나 속성에 변화가 있을 때마다 발생합니다. 이는 사용자의 상호작용이나 데이터의 변화 등으로 인해 UI를 업데이트해야 할 필요가 있을 때 실행됩니다. 리렌더링 과정에서 React는 이전 렌더링 결과와 비교하여 실제 변경이 필요한 부분만 실제 DOM에 반영합니다. 이는 성능 최적화를 위한 핵심적인 메커니즘입니다.

차이점

-발생 시점: 초기 렌더링은 애플리케이션 시작 시 단 한 번 발생합니다. 반면, 리렌더링은 애플리케이션이 실행되는 동안 상태나 속성의 변경에 따라 여러 번 발생할 수 있습니다.
-목적: 초기 렌더링은 애플리케이션의 UI를 처음으로 화면에 그리기 위한 과정입니다. 리렌더링은 상태나 속성의 변경을 UI에 반영하기 위한 과정입니다.
-과정: 두 경우 모두 가상 DOM을 사용하여 변경 사항을 계산하고 실제 DOM에 반영하는 과정은 유사하지만, 리렌더링은 변경된 부분만 효율적으로 업데이트하는 것에 초점을 맞춥니다.

 

Props의 개념과 특징

Props는 React에서 컴포넌트 간에 데이터를 전달하는 방법입니다. Props는 properties의 줄임말로, 부모 컴포넌트로부터 자식 컴포넌트로 데이터를 전달할 때 사용됩니다. Props를 통해 컴포넌트는 재사용 가능하고 유지 관리가 쉬워집니다.

Props의 특징

1.읽기 전용(Read-only): Props는 컴포넌트 내부에서 수정될 수 없으며, 부모 컴포넌트에서만 값을 설정할 수 있습니다.
2.재사용성(Reusability): 다양한 곳에서 동일한 컴포넌트를 다른 props와 함께 사용하여 컴포넌트의 재사용성을 높일 수 있습니다.
3.단방향 데이터 흐름(Unidirectional Data Flow): 데이터는 항상 상위 컴포넌트에서 하위 컴포넌트로만 흐릅니다. 이는 애플리케이션의 데이터 흐름을 예측 가능하게 하고 디버깅을 용이하게 합니다.

 

-예제-

// 자식 컴포넌트
function Welcome(props) {
  return <h1>Hello, {props.name}!</h1>;
}

// 부모 컴포넌트
function App() {
  return <Welcome name="React" />;
}

Hook의 개념과 규칙, 종류

개념

Hook은 React 16.8에서 도입된 기능으로, 함수형 컴포넌트에서 상태 관리와 같은 React의 기능을 "hook"할 수 있는 기능입니다. 클래스 컴포넌트에서만 사용할 수 있었던 상태 관리와 생명주기 메서드를 함수형 컴포넌트에서도 사용할 수 있게 해 줍니다. Hook을 사용하면 코드의 재사용성을 높이고, 컴포넌트의 계층을 단순화할 수 있습니다.

규칙

1.최상위에서만 Hook을 호출해야 합니다. 반복문, 조건문, 중첩된 함수 내에서 Hook을 실행하면 안 됩니다.
2.React 함수 컴포넌트 내에서만 Hook을 호출해야 합니다. 일반 JavaScript 함수에서는 Hook을 호출하면 안 됩니다(커스텀 Hook은 예외).

종류

1.기본 Hook
-useState: 컴포넌트의 상태를 관리합니다.
-useEffect: 컴포넌트가 렌더링될 때마다 특정 작업을 수행할 수 있게 해 줍니다.
-useContext: React 컨텍스트를 통해 전역 상태를 관리할 수 있습니다.
2.추가 Hook
-useReducer: 상태 업데이트 로직을 컴포넌트 바깥으로 분리할 수 있습니다.
-useCallback: 특정 함수를 재사용할 수 있게 해 줍니다.
-useMemo: 연산량이 많은 함수의 반환값을 재사용할 수 있게 해 줍니다.
-useRef: 특정 DOM을 선택하거나, 컴포넌트 내에서 조회 및 수정할 수 있는 변수를 관리합니다.
-useImperativeHandle: 부모 컴포넌트가 자식 컴포넌트 내의 인스턴스 값을 직접 조작할 수 있게 해 줍니다.
-useLayoutEffect: DOM 변경 후 바로 동기적으로 실행되는 효과를 생성합니다. useEffect와 유사하지만, 시점이 다릅니다.
-useDebugValue: 커스텀 Hook을 디버깅할 때 사용합니다.

 

-예제-

import React, { useState, useEffect } from 'react';

function Example() {
  // useState를 사용하여 'count' 상태를 관리합니다.
  const [count, setCount] = useState(0);

  // useEffect를 사용하여 컴포넌트가 렌더링될 때마다 특정 작업을 수행합니다.
  useEffect(() => {
    document.title = `You clicked ${count} times`;
  });

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}

 

 

useState 사용문법 및 사용예제

사용 문법

useState는 초기 상태값을 인자로 받아, 상태값과 이 상태를 설정하는 함수를 쌍으로 반환합니다. 

기본 문법은 다음과 같습니다:

const [state, setState] = useState(initialState);

 

사용 예제

import React, { useState } from 'react';

function Counter() {
  // count라는 상태 변수를 선언하고, 이를 업데이트할 수 있는 setCount 함수를 함께 선언합니다.
  // count의 초기값은 0입니다.
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>You clicked {count} times</p>
      {/* setCount 함수를 호출하여 count 상태를 업데이트합니다. */}
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}

export default Counter;

 

 

함수를 이용하여 컴포넌트 작성하는 2가지 문법

1. 함수 컴포넌트(Function Component)

함수 컴포넌트는 JavaScript의 일반 함수를 사용하여 정의할 수 있습니다. 이 방법은 React의 초기 버전부터 사용되었으며, React Hook이 도입된 이후로 더욱 널리 사용되고 있습니다. 함수 컴포넌트는 간결하며, 상태(state) 관리와 생명주기(lifecycle) 메소드를 Hook을 통해 사용할 수 있습니다.

import React from 'react';

function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}

 

2. 화살표 함수 컴포넌트(Arrow Function Component)

ES6에서 도입된 화살표 함수(Arrow Function)를 사용하여 컴포넌트를 정의하는 방법입니다. 화살표 함수 컴포넌트는 함수 컴포넌트와 기능적으로 동일하지만, 보다 간결한 문법으로 컴포넌트를 작성할 수 있습니다. 화살표 함수는 this 바인딩이 다르므로 주의해야 하지만, React 컴포넌트에서는 대부분의 경우 문제가 되지 않습니다.

import React from 'react';

const Welcome = (props) => {
  return <h1>Hello, {props.name}</h1>;
}

 

리액트 Array.map(), filter 사용 문법 정리 및 사용하면 얻을 수 있는 장점

Array.map() 사용법

map() 함수는 배열의 각 요소에 대해 주어진 함수를 호출하고, 그 결과를 모아 새로운 배열을 반환합니다. 리액트에서 map()은 주로 리스트 데이터를 컴포넌트의 목록으로 변환할 때 사용됩니다.

const numbers = [1, 2, 3, 4, 5];
const doubled = numbers.map((number) => number * 2);
console.log(doubled); // [2, 4, 6, 8, 10]

 

Array.filter() 사용법

filter() 함수는 주어진 함수의 테스트를 통과하는 모든 요소로 새로운 배열을 생성합니다. 이는 리스트에서 특정 조건을 만족하는 항목만 필터링할 때 유용합니다.

const numbers = [1, 2, 3, 4, 5];
const evens = numbers.filter((number) => number % 2 === 0);
console.log(evens); // [2, 4]

 

장점

1.불변성 유지: map()과 filter()는 기존 배열을 변경하지 않고 새 배열을 반환합니다. 이는 리액트의 불변성 원칙과 일치하여, 상태를 직접 수정하지 않고 새 상태를 생성함으로써 예측 가능한 코드를 작성할 수 있게 합니다.
2.선언적 코드: 이 함수들을 사용하면 무엇을 할 것인지(How) 보다는 무엇을 하고 싶은지(What)에 초점을 맞출 수 있어 코드가 더 읽기 쉽고 이해하기 쉬워집니다.
3.재사용성 및 조합성: 작은 함수를 조합하여 복잡한 로직을 쉽게 구현할 수 있습니다. 특히, filter()와 map()을 함께 체이닝하여 사용하면, 데이터를 처리하고 결과를 렌더링하는 과정을 간결하게 표현할 수 있습니다.

 

리액트에서 입력한 input 데이터를 useState를 사용하여 가져온 후 출력하는 방법 및 사용 예

 

1.useState Hook Import 하기

우선, useState hook을 import 해야 합니다. 이는 리액트의 기본 패키지에서 제공됩니다.

import React, { useState } from 'react';

2.useState를 사용하여 상태 정의하기

useState를 호출하여 입력 데이터를 저장할 상태를 정의합니다. 이 함수는 상태 변수와 그 상태를 업데이트하는 함수를 쌍으로 반환합니다.

const [inputValue, setInputValue] = useState('');

3.input 요소에 이벤트 핸들러 연결하기

사용자가 input에 입력할 때마다 상태를 업데이트하기 위해 input 요소에 onChange 이벤트 핸들러를 추가합니다. 이 핸들러는 이벤트 객체를 받아 현재 입력값(event.target.value)으로 상태를 업데이트합니다.

<input
  type="text"
  value={inputValue}
  onChange={(e) => setInputValue(e.target.value)}
/>

4.입력 데이터 출력하기
저장된 입력값을 사용하여 화면에 출력하거나 다른 로직에 활용할 수 있습니다.

<div>입력값: {inputValue}</div>

 

-전체 예제-

import React, { useState } from 'react';

function InputComponent() {
  const [inputValue, setInputValue] = useState(''); // 초기 상태값은 빈 문자열

  return (
    <div>
      <input
        type="text"
        value={inputValue}
        onChange={(e) => setInputValue(e.target.value)}
      />
      <div>입력값: {inputValue}</div> {/* 상태값 출력 */}
    </div>
  );
}

export default InputComponent;

 

조건부 렌더링에 대한 설명 및 사용 예

조건부 렌더링(Conditional Rendering)은 특정 조건에 따라 다른 컴포넌트 또는 JSX를 렌더링하는 방법을 말합니다. React에서는 JavaScript의 조건문을 사용하여 이를 구현할 수 있으며, 가장 일반적인 방법으로는 삼항 연산자, 논리 연산자, if 문 등이 있습니다.

1. 삼항 연산자를 사용한 조건부 렌더링

삼항 연산자는 조건에 따라 두 개의 표현식 중 하나를 실행할 수 있습니다. 이를 통해 컴포넌트를 조건부로 렌더링할 수 있습니다.

import React from 'react';

function Welcome({ isLoggedIn }) {
  return (
    <div>
      {isLoggedIn ? <h1>환영합니다!</h1> : <h1>로그인이 필요합니다.</h1>}
    </div>
  );
}

 

2. 논리 연산자를 사용한 조건부 렌더링

&& 연산자를 사용하면 어떤 조건이 참일 때만 컴포넌트를 렌더링하도록 할 수 있습니다. 만약 조건이 거짓이라면 React는 무시하고 건너뛰게 됩니다.

import React from 'react';

function Welcome({ isLoggedIn }) {
  return (
    <div>
      {isLoggedIn && <h1>환영합니다!</h1>}
    </div>
  );
}

 

3. if 문을 사용한 조건부 렌더링

더 복잡한 조건부 렌더링을 필요로 할 때는 JavaScript의 if 문을 사용할 수 있습니다. 이 방법은 보통 함수 내부에서 조건에 따라 다른 컴포넌트를 반환하도록 구현됩니다.

import React from 'react';

function Welcome({ isLoggedIn }) {
  if (isLoggedIn) {
    return <h1>환영합니다!</h1>;
  } else {
    return <h1>로그인이 필요합니다.</h1>;
  }
}