Vite로 React 시작하기

Vite

Vite는 CRA와 같이 리액트 프로젝트를 풀 세팅해주는 빌드 도구입니다.

WebPack을 사용하는 대신 Esbuild를 사용합니다.

프로젝트 시작하기

yarn create vite "폴더명" --template react

프로젝트가 생성되었다면

yarn dev

를 통해 프로젝트를 실행해 봅시다.

컴포넌트

컴포넌트를 통해 UI를 재사용 가능한 여러 조각으로 나눔으로써, 코드의 가독성과 유지보수성을 높이고, 각 조각을 독립적으로 개발 및 관리할 수 있습니다. 이는 동일한 UI 패턴을 여러 곳에서 효율적으로 재사용하거나, 특정 부분만 업데이트해야 할 때도 전체 UI에 영향을 주지 않고 변경할 수 있도록 도와줍니다.

const App = () => {
  return (
    <div>
        <Greeting/>
        <Greeting/>
        <Greeting/>
    </div>
  )
}

const Greeting = () => {
    return <div>Hello, World</div>
}

Props

부모 컴포넌트가 자식 컴포넌트에게 물려준 데이터입니다. 부모 -> 자식 방향으로만 흐름(단방향)

const App = () => {
    const name1 = '김덕배';
    const name2 = '손흥민';
    const name3 = '황희찬';
    return (
        <div>
            <Greeting name={name1}/>
            <Greeting name={name2}/>
            <Greeting name={name3}/>
        </div>
    );
};

const Greeting = ({name}) => {
    return <div>Hello, {name}</div>;
};

Props Children

App 컴포넌트에서 보낸 '김덕배'라는 정보는 children이라는 이름으로 가져올 수 있습니다.

const App = () => {
    return (
        <div>
            <Greeting>김덕배</Greeting>
        </div>
    );
};

const Greeting = ({children}) => {
    return <div>Hello, {children}</div>;
};

Default Arguments

props의 기본값을 정의해줍니다.

부모로부터 children을 받지 못했을 경우 기본값인 '김덕배'를 이용하여 에러 없이 컴포넌트를 렌더링할 수 있습니다.

const App = () => {
    return (
        <div>
            <Greeting></Greeting>
        </div>
    );
};

const Greeting = ({children = '김덕배'}) => {
    return <div>Hello, {children}</div>;
};

State

내부에서 바뀔 수 있는 값을 의미합니다.

state가 변경되면 해당 컴포넌트를 리렌더링합니다.State는 React 컴포넌트 내부에서 바뀔 수 있는 데이터를 의미합니다.

State는 컴포넌트의 동적인 동작을 가능하게 하며, 값이 변경될 때마다 UI가 다시 렌더링됩니다.

이 때, useState Hook을 사용합니다. 예시로 보시죠.

const App = () => {
    const [name, setName] = useState('');
    const onClickBtn = (e) => {
        setName(e.target.value);
    }
    return (
        <div>
            <Goal name={name} onClickBtn={onClickBtn}></Goal>
        </div>
    );
};

const Goal= ({name, onClickBtn}) => {
    return (
    <div>
        <h1>{name === '' ? '필드 골이 없습니다.' : `${name} 골!!!`}</h1>
        <GoalBtn value={'김덕배'} onClickBtn={onClickBtn}/>
        <GoalBtn value={'손흥민'} onClickBtn={onClickBtn}/>
        <GoalBtn value={'황희찬'} onClickBtn={onClickBtn}/>
    </div>
    );
};

const GoalBtn = ({value, onClickBtn}) => {
    return(
        <button onClick={onClickBtn} value={value}>{value}</button>
    )
}

FrontEnd-Dev