React

 

1. React란? 

React는 페이스북이 만든 UI 라이브러리이다.
웹사이트의 화면을 빠르고 효율적으로 만들 수 있도록 도와준다.

라이브러리 vs 프레임워크
React는 프레임워크가 아니라 라이브러리이다.
필수적으로 따라야 하는 규칙이 없다.

React의 특징

• 컴포넌트 기반 → UI를 조각(컴포넌트)으로 나누어 관리한다.
• 가상 DOM 사용 → 변경된 부분만 업데이트하여 성능이 빠르다.
• 재사용성 좋음 → 한 번 만든 컴포넌트를 여러 곳에서 사용할 수 있다.

 

 

2. React를 써야하는 이유

• 빠르다 → Virtual DOM 덕분에 성능이 좋다.
• 유지보수가 쉽다 → 컴포넌트를 재사용할 수 있다.

 

3. React 기본 개념

1. JSX (JavaScript + XML)

JSX는 JavaScript 안에서 HTML을 작성할 수 있도록 도와준다.

const element = <h1>Hello, React!</h1>;

 return 안에서 HTML 태그처럼 작성하면 된다.

 

2. 컴포넌트(Component)

컴포넌트는 화면을 구성하는 독립적인 블록이다.

function Hello() {
  return <h1>Hello, React!</h1>;
}

React에서는 함수형 컴포넌트를 주로 사용한다.

 

 

3. 상태(State)와 속성(Props)

• State (상태) → 컴포넌트 내부에서 변하는 값이다.
• Props (속성) → 부모 컴포넌트에서 자식에게 전달하는 값이다.

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

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

useState를 사용하면 상태(state)를 관리할 수 있다.

 

 

4. 이벤트 핸들링

이벤트 핸들링을 사용하면 버튼 클릭 시 원하는 동작을 실행할 수 있다.

<button onClick={() => alert('버튼 클릭됨!')}>클릭!</button>

 

 

5. 시작하기

npx create-react-app my-app
cd my-app
npm start