한컴AI 2기[스나이퍼팩토리] 한컴AI 2기 - AI개발자 교육 2주차

디스코드 활용

리액트-테일윈드 기본 설치

새로운 채팅채널 질문답변게시판이 생겨서, 기본 설치에 관한 스레드를 만들었다.

vite를 설치하고 테일윈드 css를 임포트 하는 방법을 포스트했다.

레이아웃 UI만들 때 자주 쓰던 루시드 아이콘 설치도 함께 포스트했다.

---

React 

1. useState 복습

🔹 설명

• **컴포넌트 상태(state)**를 저장하고 업데이트할 수 있게 해주는 React Hook
• 상태가 바뀌면 해당 컴포넌트는 자동으로 리렌더링

🔹 예제

import { useState } from 'react';

function Counter() {
  const [count, setCount] = useState<number>(0);

  return (
    <div>
      <p>현재 카운트: {count}</p>
      <button onClick={() => setCount(count + 1)}>증가</button>
    </div>
  );
}

 

2. useEffect 복습

🔹 설명

• 컴포넌트가 렌더링된 이후 실행되는 코드를 작성할 수 있음
• 주로 API 호출, 이벤트 리스너 등록/해제, 타이머 등 사이드 이펙트 처리

🔹 예제

import { useEffect, useState } from 'react';

function Timer() {
  const [time, setTime] = useState<number>(0);

  useEffect(() => {
    const timer = setInterval(() => setTime(t => t + 1), 1000);
    return () => clearInterval(timer); // 언마운트 시 정리
  }, []);

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

 

---

[과제 : 선행]

3. 컴포넌트 개념 확립

🔹 설명

• 컴포넌트는 UI를 구성하는 최소 단위
• 함수형 컴포넌트가 기본이고, props를 받아 렌더링함

🔹 예제

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

function App() {
  return (
    <div>
      <Welcome />
    </div>
  );
}

 

4. props 개념 확립

🔹 설명

• props는 부모 → 자식으로 전달되는 데이터
• 컴포넌트 재사용성과 유연성에 핵심 역할

🔹 예제

type UserProps = {
  name: string;
  age: number;
};

function UserCard({ name, age }: UserProps) {
  return <p>{name}는 {age}살입니다.</p>;
}

function App() {
  return <UserCard name="XinKer" age={29} />;
}

 

5. useRef 개념 확립

🔹 설명

• DOM 요소에 직접 접근하거나, 렌더링에 영향을 주지 않는 값 저장에 사용

🔹 예제 1: DOM 접근

import { useRef } from 'react';

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

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

  return (
    <>
      <input ref={inputRef} type="text" />
      <button onClick={focus}>포커스</button>
    </>
  );
}

🔹 예제 2: 값 저장 (렌더링에 영향 X)

const countRef = useRef(0);
countRef.current += 1;

 

6. useMemo 개념 확립

🔹 설명

• 비싼 연산 결과를 캐싱해서 불필요한 계산 방지
• useEffect와 혼동하지 말기 (렌더링 최적화용임)

🔹 예제

import { useMemo, useState } from 'react';

function ExpensiveCalc({ num }: { num: number }) {
  const result = useMemo(() => {
    console.log("계산 중...");
    return num * 10000;
  }, [num]);

  return <p>결과: {result}</p>;
}

function App() {
  const [value, setValue] = useState(1);
  return (
    <>
      <ExpensiveCalc num={value} />
      <button onClick={() => setValue(value + 1)}>업</button>
    </>
  );
}

 

정리

React Hook
├─ useState → 상태 관리
├─ useEffect → 사이드 이펙트
├─ useRef → DOM 접근 / 상태 저장 (렌더링 X)
└─ useMemo → 계산 결과 캐싱 React 개념
├─ Component → UI 단위
└─ Props → 부모 → 자식 데이터 전달

---

Mingo 클론코딩

테일윈드 css를 쓰다보니, 작업이 용이했다.