[새싹/코딩온] 풀스택 웹 개발자 취업 부트캠프 11주차 (1): React

React

• Facebook에서 개발한 사용자 인터페이스(UI) 구축을 위한 Javascript 라이브러리이다.

🖥️ 특징

1️⃣ Data Flow

- 단방향 데이터 흐름을 채택하고 있다. 데이터는 부모 컴포넌트에서 자식 컴포넌트로 단방향 전달된다.

2️⃣ Component 기반 구조

- 어플리케이션의 UI를 독립적이고 재사용 가능한 조각으로 나누어 구성한다. 

- 코드의 재사용성과 유지보수성이 향상된다.

3️⃣ Virtual DOM

1) 상태 변경: 컴포넌트의 상태가 변경되면 React는 새로운 Virtual DOM 트리를 생성한다.

2) 비교: 새로 생성된 Virtual DOM과 이전 Virtual DOM을 비교하여 변경된 부분을 파악한다.

3) 재조정: 변경된 부분만을 실제 DOM에 적용한다.

4️⃣ Props and State

- Props

  - 부모 컴포넌트에서 자식 컴포넌트로 전달해주는 데이터

- State

  - 컴포넌트 내부에서 선언되고 내부에서 값을 변경

5️⃣ JSX (JavaScript XML)

- HTML과 유사한 구문을 사용하여 컴포넌트의 구조를 직관적으로 표현할 수 있게 해준다.

🖥️ Component

- UI를 구성하는 재사용 가능한 독립적인 코드 조각. React 어플리케이션의 기본 구성 요소로, UI를 논리적이고 재사용 가능한 부분으로 나누는데 도움을 준다.

💡 Component의 특징

1️⃣ 재사용성: 컴포넌트는 여러 곳에서 반복적으로 사용 가능

2️⃣ 독립성: 각 컴포넌트는 독립적으로 동작하며, 자체적인 구조, 기능, 스타일을 가질 수 있음

3️⃣ 계층 구조: 컴포넌트는 다른 컴포넌트 내에 중첩될 수 있어 복잡한 UI를 구성할 수 있음

4️⃣ props를 통한 데이터 전달: 컴포넌트는 props라는 입력을 받아 처리할 수 있음

💡 Component의 종류

1️⃣함수형 컴포넌트

  function myFunc() {
    alert("안녕 내 이름은 00야");
  }

  function addNum(a, b) {
    alert(a + b);
  }

  return (
    <div>
      <span onClick={myFunc}>안녕하세요</span>
      <span onClick={() => myFunc()}>안녕하세요</span>
      <br></br>
      <span onClick={addNum(8, 5)}>8+5의 결과를 alert로 확인해보세요.</span>
    </div>
  );

2️⃣ 클래스형 컴포넌트

class ClassComp extends Component {
  render() {
    const name = "class";
    return (
      <h2 style={{ color: "blue" }} onClick={() => alert("Clicked!")}>
        {name}형 컴포넌트 사용
      </h2>
    );
  }
}

⭐render 함수를 반드시 사용해야 함

🖥️ JSX

⭐ 전체는 하나의 태그로 감싸야 한다!

⭐ HTML을 작성하다가 중간에 Javascript 문법을 사용하고 싶을 때는 {중괄호}로 감싸면 된다.

export default function NameAnimal() {
  const name = "호두";
  const animal = "강아지";
  const a = 300;
  const b = 200;
  return (
    <div> // div태그로 전체 코드를 감쌌다.
      <h2>
        제 반려 동물의 이름은 {name}입니다.
        <br></br>
        {name}는 {animal}입니다.
      </h2>
      <h2>{a > b && "a가 b보다 큽니다."}</h2>
      <br></br>
      <h2>{3 + 5 == 8 ? "정답입니다!" : "오답입니다!"}</h2>
    </div>
  );
}

 

드디어 프론트엔드에서 가장 많이 쓰인다는 react 시작! 정리하다 보니 내가 함수형 컴포넌트와 클래스형 컴포넌트를 헷갈렸었다는 것을 알았다. 실습을 혼자 푸는데 처음에는 클래스 형으로 적었다가 뭔가 꼬여서 안되가지고 함수형으로 갈아탔다. 아직은 어려운 react 🥲