[Nextjs] 3장 React 기본기

✅ 1. 컴포넌트 (Component)

컴포넌트는 React 앱의 기본 단위로 함수형 컴포넌트를 주로 사용합니다.

function Welcome() {
  return <h1>Hello</h1>;
}

export default Welcome;

---

✅ 2. Props (속성)

Props는 컴포넌트에 전달하는 값으로, 부모 -> 자식순으로 데이터를 전달합니다.

// 부모
<Hello name="Jammy" age={25} />


// 자식
interface HelloProps {
  name: string;
  age: number;
}

// 자식
const Hello = ({ name, age }: HelloProps) => {
  return (
    <h1>
      Hello, {name}, {age}
    </h1>
  );
};

export default Hello;

---

✅ 3. State (상태)

state는 컴포넌트 내부에서 관리되는 동적인 값으로, useState 훅을 사용해 선언합니다.

import { useState } from "react";

function Counter() {
  const [counter, setCounter] = useState(0);

  return (
    <div>
      <h1>카운터: {counter} </h1>
      <button onClick={() => setCounter(counter + 1)}>클릭</button>
    </div>
  );
}

export default Counter;

---

✅ 4. Hooks 

• useState -> 컴포넌트 상태 관리
• useEffect -> 렌더링 후 실행되는 사이드 이벤트(데이터 가져오기, 구독 등)

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

const Hooks = () => {
  const [time, setTime] = useState(0);

  useEffect(() => {
    const id = setInterval(() => setTime((t) => t + 1), 1000);
    return () => clearInterval(id); // cleanup
  }, []);

  return (
    <div>
      <p>{time} 초 경과</p>
    </div>
  );
};

export default Hooks;

• useRef - DOM 요소나 값을 기억

import React, { useRef } from "react";

function RefUse() {
  const inputRef = useRef<HTMLInputElement>(null);

  const focus = () => inputRef.current?.focus();

  return (
    <>
      <input ref={inputRef} />
      <button onClick={focus}>포커스 추가</button>
    </>
  );
}

export default RefUse;

• useContext - 전역 상태 전달(Props drilling을 피할 때)

import { createContext, useContext } from "react";
import Hooks from "@/components/ReactDefault/Hooks";
import Hello from "@/components/ReactDefault/Poprs";
import RefUse from "@/components/ReactDefault/useRef";
import Counter from "@/components/ReactDefault/useState";
import Welcome from "@/components/ReactDefault/Welcome";
import type { NextPage } from "next";

const ThemeContext = createContext("light");

function Child() {
  const theme = useContext(ThemeContext);
  return <p>현재 테마: {theme}</p>;
}

const Home: NextPage = () => {
  return (
    <>
      <ThemeContext.Provider value="light">
        <Welcome />
        <hr />
        <Hello name="Jammy" age={25} />
        <hr />
        <Counter />
        <hr />
        <Hooks />
        <hr />
        <RefUse />
        <hr />
        <Child />
      </ThemeContext.Provider>
    </>
  );
};

export default Home;

---

✅ 5. 이벤트 처리

React 이벤트는 camelCase로 작성합니다.

function EventButton() {
  const handleClick = () => alert("Button Clicked!");

  return <button onClick={handleClick}>클릭</button>;
}

export default EventButton;

---

✅ 6. 리스트 렌더링

map()으로 반복 렌더링을 수행하며 key 속성을 필수로 넣어주어야 합니다.

const fruits = ["사과", "바나나", "포토", "딸기"];

function FruitList() {
  return (
    <ul>
      {fruits.map((f, i) => (
        <li key={i}>{f}</li>
      ))}
    </ul>
  );
}

export default FruitList;

---

✅ 7. 조건부 렌더링

조건부 렌더링은 삼항 연산자, &&연산자를 활용하여 렌더링합니다.

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

export default Login;

---

 

GitHub - Koras02/nextjs-bloging: https://thinky.tistory.com/category/Front-End/NextJs