[React] 리액트의 기본 개념

해당 게시물은 과거에 작성한 블로그 내용을 옮겨 온 것으로, 가독성이 떨어지고 내용이 부정확할 수 있습니다.

React의 개념

• 사용자 인터페이스를 구축하기 위한 Java Script 라이브러리
• 컴포넌트 사용
  • 컴포넌트: 리액트 어플리케이션을 이루는 최소한의 단위
  • 재사용성과 독립성을 높여주는 장점
  • 컴포넌트의 이름은 항상 대문자로 시작할 것
• 선언형 프로그래밍 방식을 사용
  • 선언형 프로그래밍 방식: 프로그램이 무엇을 나타내야 하며 무엇을 해야 하는지 나타내는 방식
  • 어떻게 나타내는지는 고려하지 않음
• CSS를 사용하여 시각적 요소 정의
  • css 파일을 import 하여 적용
  • jsp처럼 class를 사용하지 않고 className을 사용

import "./APP.css"

<h4 className ='title'>{title[0]}<span onClick={() => {changeHeart(heart + 1)}}> ❤ </span>{heart} </h4>
        <p className = 'content'>작성자: 정위블</p>

React의 상태 (State)

• state: 실시간 데이터 관리를 위해 state 객체에 데이터를 넣고 상태 변수의 속성을 부여한 변수
• 상태 관리
  • state를 관리하는 것
  • 기존의 데이터를 건드는 것이 아닌, 해당 데이터의 객체를 받아와 그 객체 안의 데이터를 바꿔서 데이터 수정
  • 바꾼 데이터를 state 객체를 통해 새로운 객체나 배열로 전환하여 해당 데이터를 실시간으로 관리
• 이벤트 발생 시 state가 변화
• 변경되고 난 후에 리렌더링을 해야만 새로운 데이터로 적용
• useState를 import 하여 리렌더링 진행

import { useState } from 'react';

컴포넌트의 종류

• stateless 컴포넌트
  • state가 존재하지 않는 컴포넌트
  • 상태가 변경되지 않아 리렌더링 될 필요가 없음
  • state 관리 없이 함수의 로직과 비동기 처리만으로 상태 관리의 생명주기 관리
• stateful 컴포넌트
  • state가 존재하는 컴포넌트
  • class에서 this 인스턴스를 통해 state에 접근하고 관리

useState

• state에 변경이 있을 때 그것을 적용하기 위해 리렌더링 하는 함수
• 배열을 반환
  • 첫 번째 인자: 값을 저장하는 변수
  • 두 번째 인자: 변수 값의 변화를 감지해 컴포넌트를 리렌더링 하는 함수
  • [저장할 변수, 호출할 함수] = useState(자료형);

let [heart, setHeart] = useState(0);

const [text, setText] = useState("");
const changeHandler = (e) => {
    setText(e.target.value); };     // 텍스트 값을 변경하는 로직    

• 대부분 변화 감지 함수는 set으로 시작하며 카멜 케이스를 통해 작성
  • ex) setTitle, setText 등
• hook: useState, useEffect 등 함수 컴포넌트에서 state와 생명주기 기능을 연동할 수 있게 하는 함수
  • 컴포넌트 안에서만 사용

wrapper

• 자식 컴포넌트들을 감싸는 최상위 부모 역할의 컴포넌트
• 리액트에는 기본 내장 wrapper가 존재
  • React.Fragment
  • 혹은 태그 안에 아무 것도 작성하지 않고 자식 컴포넌트를 감싸는 것

// 1. React.Fragment
<React.Fragment>
    // 자식 컴포넌트
</React.Fragment>

2. empty
<>
    // 자식 컴포넌트
</>