250905 [ Day 44 ] - JavaScript (5), React

TaeHyun·2025년 9월 5일

TIL

목록 보기

46/182

시작하며

오늘부로 꽤 길었던 웹 파트가 모두 끝났다. 처음 웹에 대해 배운다고 했을 때는 길어도 4일 정도 간단한 구현을 배우지 않을까 싶었는데, 생각보다 많은 내용을 다뤄 꽤 길어졌던 것 같다.
오늘은 React에 대해 조금 배우고 React를 사용해서 간단한 웹을 만들어 배포까지 해보았다.

React

사용자 인터페이스를 구축하기 위한 JavaScript 라이브러리
라이브러리 : 개발자가 필요할 때 직접 불러서 사용
프레임워크 : 미리 정해 놓은 뼈대에 개발자가 맞춰서 작성
단방향 데이터 흐름 (Top-Down 구조)

Node.JS

웹 브라우저 밖에서도 자바스크립트를 실행할 수 있게 해주는 실행환경
- 원래는 웹 브라우저 안에서만 동작
npm (Node Package Manager) : 자바스크립트 패키지(라이브러리) 를 공유하고 관리하는 도구

CRA

CRA (Create React App) : 리액트 공식 팀이 만든 리액트 프로젝트 초기 설정 도구
- 공식 지원 종료 (프레임 워크 사용 권장)
- npx create-react-app 프로젝트 이름
- npm run start : 임시 개발 서버로 실행

Component

UI를 독립적이고 재사용 가능한 단위로 분리하여 정의한 블록
Class Component : 컴포넌트를 class로 생성 (현재는 사용X)
Functional Component : 컴포넌트를 함수로 생성 (표준적인 컴포넌트 생성 방식)
컴포넌트가 복잡해지면 src 폴더 하위에 components 폴더 생성하여 분리해서 사용

JSX

JavaScript 확장 문법
항상 return 이후에 HTML 작성
반드시 하나의 부모 요소가 전체 요소를 감싸야 함
HTML 내부에서 JS 문법을 사용하고 싶을때는 {} 사용
if / for문 사용 불가능 (삼항연산자 사용)
CSS 인라인 형태로 적용 시 {} 안에 CSS 객체로 사용
className 등 기존 HTML과 다른 부분이 있음

Props

컴포넌트 간 데이터를 전달하기 위한 읽기 전용 객체
props 사용 : 구조 분해 할당으로 값을 가져옴

function Greeting({ text }) {
    return <div style={{ fontSize: "30px" }}>{text}</div>;
}

export default function App() {
    return (
        <div className="App">
            <Greeting text="안녕하세요" />
            <Greeting text="반갑습니다" />
            <Greeting text="어서오세요" />
        </div>
    );
}

State

컴포넌트가 기억해야 하는 값으로, 동적인 데이터 (변경 가능)

const [a, b] = useState(c);

a : 상태
b : a의 값을 업데이트하는 함수
c : 초기값

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

    return (
        <div>
            <div>현재 값 : {count}</div>
            <button onClick={() => setCount(count - 1)}>-1 감소</button>
            <button onClick={() => setCount(0)}>초기화</button>
            <button onClick={() => setCount(count + 1)}>+1 증가</button>
        </div>
    );
}

함수 사용

function Counter() {
    // count : 상태
    // setCount : count의 값을 업데이트하는 함수
    const [count, setCount] = useState(0);

    const handleButtonClick = (option) => {
        if (option === "plus") setCount((prev) => prev + 1);
        else if (option === "minus") setCount((prev) => prev - 1);
        else if (option === "reset") setCount(0);
    };

    return (
        <div>
            <div>현재 값 : {count}</div>
            <button onClick={() => handleButtonClick("minus")}>-1 감소</button>
            <button onClick={() => handleButtonClick("reset")}>초기화</button>
            <button onClick={() => handleButtonClick("plus")}>+1 증가</button>
        </div>
    );
}

리스트 렌더링

React에서는 배열 데이터를 화면에 출력할 때 map() 함수를 사용

const todoList = [
    "점심 먹기",
    "복습하기",
    "블로깅",
    "운동",
    "게임",
    "유튜브보기",
];

<ul
    style={{
        display: "flex",
        flexDirection: "column",
        alignItems: "center",
    }}
>
    {todoList.map((todo, idx) => (
        <li key={idx}>{todo}</li>
    ))}
</ul>

React는 업데이트 전 기존 요소와 업데이트 후 요소를 비교하는데 key를 사용 (불필요한 리렌더링 방지)

마치며

JavaScript와 React를 배워보니 생각보다 더 복잡하고 어려웠던 것 같다. 처음 생각했던 이미지는 CSS처럼 직관적인 기능일 줄 알았는데, 대부분의 기능을 함수를 사용해서 웹을 구현하니까 단기간 배워서 가능한 언어는 아니라는 것을 이번 기회에 느꼈다. 하지만 빠른 템포의 수업 속에서 코드 따라 치는 것도 겨우 했던 날들이 많아서, 필요한 기능을 하나씩 찾아서 구현하다 보면 또 할 만하다는 생각이 들 수도 있을 것 같다.
다음 주부터는 OpenCV와 AI에 대해서도 간단하게 다뤄본다고 해서 잘 따라갈 수 있도록 더 노력해야겠다.