useState 와 useEffect

useState 와 useEffect 는 React의 Hook 기능 중 가장 기본이 되는 두 가지다. 컴포넌트의 상태관리와 부수효과(side effects) 실행에 관련된 기능을 제공한다.

이 두 훅은 함수형 컴포넌트에서 클래스 컴포넌트의 기능을 흉내 내기 위해 도입됐다.

useState

함수형 컴포넌트에서 상태(state)를 관리할 수 있게 해주는 훅이다. 클래스 컴포넌트에서 this.state 와 this.setState 를 사용하는 것과 유사한 기능을 제공한다.

useState 를 사용하면 컴포넌트 내에서 동적인 데이터를 저장하고 업데이트할 수 있으며, 이를 통해 사용자 인터페이스(UI)를 동적으로 변화시킬 수 있다.

useState 사용법 예시

import React,{ useState } from 'react';

function Counter() {
	
  // count 상태 , 그리고 count 를 업데이트하는 setCount
  const [count, setCount] = useState(0); // 초기값 0
  
  return (
    <div>
    	<p> You clicked {count} times </p>
		<button onClick={() => setCount(count+1)}>
          Click me
        </button>
    </div>
  );
}

useEffect

useEffect는 컴포넌트가 렌더링될 때마다 특정 작업을 수행할 수 있게 해주는 훅이다. 이는 클래스 컴포넌트의 생명주기 메소드인 componentDidMount, componentDidUpdate, componentWillUnmount를 합친 형태로 볼 수 있다. useEffect를 사용하면 데이터 fetching, 구독(subscription)설정, 수동으로 DOM 을 조작하는 등의 부수 효과 를 처리할 수 있다.

useEffect 사용법 예시

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

function Example() {
  const [count,setCount] = useState(0);
  
  useEffect(() => {
    document.title = `You clicked ${count} times`;
});
  
return {
  <div>
  	<p> You clicked {count} times </p>
  	<button onClick={() => setCount(count+1)}>

차이점

1. 목적과 역할
   App.tsx 는 애플리케이션의 주요 구조와 레이아웃을 정의하는 반면, index.tsx는 애플리케이션을 실제로 웹 페이지에 렌더링하고 전역 설정을 수행하는 역할을 한다.

2. 실행과정에서의 위치
   index.tsx는 애플리케이션의 최초 진입점으로서 App.tsx를 포함하여 전체 애플리케이션을 웹 페이지에 마운트하는 시작점이다. App.tsx는 이 과정에서 렌더링되는 주요 컴포넌트 중 하나이다.

이 두 파일을 통해 React 애플리케이션은 모듈화된 구조로 개발될 수 있으며, 개발자는 애플리케이션의 구조와 설정을 효과적으로 관리할 수 있다.