[React] React 기초 1

React

• UI를 구성하기 위한 자바스크립트 라이브러리
• 컴포넌트를 기반으로 화면을 효율적으로 재사용/관리 할 수 있도록 설계된 프론트엔드 기술
• 전통적인 DOM을 직접 조작하는 대신, 가상 DOM(Virtual Dom)을 통해 변경된 부분만 최소 비용으로 업데이트 함
• SPA 개발을 넘어 next.js 같은 프레임워크와 함께 SSR/CSR/SSG/ISR 등 다양한 렌더링 젼략을 지원하는 기술

SPA (Single Page Application)

• 하나의 HTML 페이지에서 모든 화면 전환을 처리하는 웹 애플리케이션 방식
• 기본 MPA(Multi Page Application)처럼 페이지 이동 때마다 서버에서 HTML 재요청을 하지 않고, 처음 한 번만 HTML, CSS, JavaScript를 받아오고 이후 화면 전환은 자바스크립트가 브라우저 내부에서 렌더링을 변경해 처리한다.
• 페이지 이동처럼 보이더라도 실제는 페이지가 다시 로드되지 않는 구조

리액트의 동작 원리

• 리액트는 UI를 컴포넌트 단위로 구성한다. 화면을 버튼, 카드, 리스트처럼 작은 단위의 컴포넌트로 쪼개어 만들고, 각 컴포넌트가 자신의 상태와 렌더링 방식을 스스로 관리하도록 함으로 재사용성과 유지보수성을 극대화한다.
• 상태가 바뀌면 새로운 Virtual DOM을 만들고, 이전 Virtual DOM과 비교 후, 이번 렌더링 때 만들어 두었던 Virtual DOM과 어디가 어떻게 달라졌는지를 계산한다.
• 변경된 부분만 실제 DOM에 반영하여 렌더링 비용을 최소화한다.
• Hook을 통해 상태 관리와 렌더링 사이클을 제어한다. 함수형 컴포넌트에서 상태를 저장하고, 렌더링 시점 전/후에 실행할 로직을 등록할 수 있게 해주며 언제 어떤 조건에서 다시 렌더링해야 하는지 세밀하게 제어한다.

Vite

차세대 프론트엔드 개발을 위한 초고속 빌드 도구로 기존 번들(Webpack 등)보다 훨씬 빠르게 개발 서버를 실행하고 파일 변경을 처리할 수 있는 도구이다.

npm create vite@latest 폴더명 -- --template react

React Developer Tools

React를 사용하는지 확인할 수 있는 확장 프로그램

• 컴포넌트 트리 보기
• Props 확인
• State 확인
• Hooks 확인
• Context 확인
• 컴포넌트가 다시 렌더링되는 이유 분석

	Elements 탭	Components 탭
확인	실제 HTML DOM	React 컴포넌트
주요 내용	CSS, HTML, ...	Props, State, Hooks, ...
목적	화면 / 스타일 분석	React 데이터 흐름 분석

Hook 함수

Hook함수란?

함수형 컴포넌트에서도 리액트의 핵심 기능(상태관리, 라이브러리 기능 등)을 사용할 수 있게 열결해주는 특별한 함수를 말한다.

useState

컴포넌트 안에서 값을 기억하고, 그 값이 바뀌면 화면을 자동으로 다시 그려주는 React의 상태 관리 함수

const [state값, state 바꾸는 함수] = useState(초기값)

useRef

• 리액트 컴포넌트 안에서 값을 기억해두는 상자
• 값을 바꿔도 리렌더링이 일어나지 않으며, 컴포넌트가 다시 렌더링되어도 상자의 값을 계속 재사용 할 수 있다.

const idIput = useRef()
console.log(ref.current)

useEffect

추가 작업 또는 외부 시스템과의 동기화 작업을 할 때 사용하는 상태 관리 함수

useEffect(() => {
    실행할 작업
}, [의존성])       // [의존성]이 바뀌면 Effect를 다시 실행

useEffect(() => {
    바뀔작업
    return() => {
        바뀌기전 데이터를 반환 (이전 작업을 정리할 함수)
    }
}, [의존성])

useEffect의 전체 흐름

1. 컴포넌트 함수 실행
2. jsx생성
   • 컴포넌트가 처음 화면에 나타날 때 (초기 mount)
3. useEffect 실행
   • user 설정: user 값
4. user 값이 변경되었을 때 (useEffect 재실행)
5. 컴포넌트가 화면에서 완전히 사라질 때 (unmount, useEffect 재실행)

useReducer

상태 변경 종류가 여러 개 일 때 상태 변경 규칙을 하나의 함수로 관리하는 Hook

const [state, dispatch] = useReducer(reducer, initialState)

dispatch: 상태 변경 요청을 보내는 함수
reducer: 상태를 어떤 방식으로 변경할지 정의한 함수
initialState: 처음 사용할 초기 상태

useReducer의 전체 흐름

사용자가 버튼 클릭 → dispatch 실행 → action 객체 전달 → reducer 실행 → reducer가 새로운 상태 반환 → React가 상태 저장 → 컴포넌트 재렌더링

useCallback

함수 자체를 기억하는 Hook. React 함수형 컴포넌트는 렌더링될 때마다 함수 전체가 다시 실행된다. 따라서 컴포넌트 내부의 함수도 다시 만들어진다.

function App() {
    const handleAdd = () => {
        console.log("추가")
    }
} // App이 다시 렌더링되면 새로운 handleAdd 함수 객체가 만들어짐

이전 handleAdd !== 새로운 handleAdd

useMemo

• 값을 감싸는 Hook
• 계산 비용이 실제로 크고, 렌더링이 자주 발생하는 곳에 사용한다.
• 함수가 아니라 계산된 결과값을 기억한다.

const 기억된값 = useMemo(() => {
    return 계산결과
}, [의존성])

• [의존성]이 변경될 때 새로 계산, 의존성이 바뀌지 않는다면 이전 결과를 기억해서 리턴한다.

React의 함수들

createContext()

• 여러 컴포넌트가 함께 사용할 데이터를 저장할 공간(Context)을 만드는 함수
• Context가 없다면 부모가 자식에게 계속 props를 전달해야 한다.
• Provider: 데이터를 넣는 역할 (속성)
• useContext(): 데이터를 꺼낼 때 쓰는 함수

createBrowserRouter()

URL과 화면 컴포넌트의 연결 규칙을 만드는 함수

1. 라우팅 규칙 만듦
const router = createBrowserRouter([
    {
        path: "/",
        element: <Home/>
    },
    {
        path: "/videos",
        element: <Videos/>
    }
])

2. 라우팅 규칙을 React 애플리케이션에 적용
    <RouterProvider router={router}/>