[클라우딩 어플리케이션 엔지니어링 TIL] 240202 - React.js 기초

Intro

---

오늘은 React의 주요 특성인 State와 Props에 대해 학습하였다.

 

 

오늘 학습한 내용

: React.js 기초

---

Why React❓

1. 리액트는 컴포넌트 기반의 UI 라이브러리이기 때문에 중복 코드를 수정할 필요가 없다.
2. 선언형 프로그램이다.
3. Virtual DOM을 사용한다.
   • 예를 들어, 5번의 돔 업데이트가 필요한 경우 Virtual DOM에 5번 업데이트가 발생할 동안 실제 돔에는 아무런 변화가 없고 변경 사항이 모두 종료되면 변경 사항을 모았다가 한번에 실제 돔을 업데이트 한다.

⚠️ 명령형 프로그래밍, 선언형 프로그래밍
▫️ 명령형 프로그래밍: 절차를 하나하나 다 나열해야 한다. (ex. 요소를 선택한 다음 요소의 아이템을 어쩌구~~) ➡️ jQuery
▫️ 선언형 프로그래밍: 목적을 바로 말한다. (ex. 아이템을 증가/감소 시킨다.) ➡️ React

 

 

Create React App

: 복잡한 설정 없이 쉽게 프로젝트를 생성하도록 돕는 보일러 플레이트

 

 

리액트 앱 생성하기

• npx: 특정 라이브러리를 항상 최신 버전으로 실행할 수 있다. (node.js를 설치할 때 함께 설치된다.)

npx create-react-app project-name

 

 

리액트 앱 실행 (package.json의 scripts 참고)

npm start

 

 

Create React App 코드 분석

• public 폴더
  • fivicon.ico: 브라우저 탭 제목 옆 아이콘
  • logo192.png, logo512.png, manifest.json: 모바일에서 홈화면에 추가 버튼 등을 눌렀을 때 설치되는 아이콘
  • roboots.txt: 검색엔진 수집/수집하지 않음 등을 설정하는 파일
• src 폴더
  • App.test.js: 코드 테스트 파일
• import/export

function App() {
  ...
}

export default App

import App from './App'

 

react는 ESModules를 사용해 import/export로 모듈 내보내기를 한다.

 

 

JSX (자바스크립트 XML)

: 자바스크립트와 HTML 태그를 섞어 사용하는 문법

• 반드시 닫힌 태그여야 한다.
  • <br>도 <br /> 처럼 셀프클로징 태그로 사용해야 한다.
• 반드시 하나의 부모를 가져야 한다. (하나의 최상위 태그로 자식 태그들을 묶어줘야 한다.
  • 최상위 태그를 사용하고 싶지 않을 땐 React.Frament나 빈 태그를 입력해야 한다.

import React from 'react'

function App() {
  return (
    <React.Fragment>
	  <h1></h1>
	  <header></header>
    </React.Fragment>
  )
}

function App() {
  return (
    <>
	  <h1></h1>
	  <header></header>
    </>
  )
}

• 태그에 class 지정하는 법
  • class="클래스명"이 아닌 className="클래스명"을 사용해야 함
• 스타일링
  • CSS 파일을 import해서 가져오기
  • inline style

import MyHeader from './MyHeader';
// import './App.css';

function App() {
  const style = {
    App: {
      backgroundColor: 'black',
    },
    h2: {
      color: 'red',
    },
    bold_text: {
      color: 'green',
    },
  };

  return (
    <div className="App" style={style.App}>
      <MyHeader />
      <h2 style={style.h2}>안녕, 리액트</h2>
      <b style={style.bold_text} id="bold_text">
        React.js
      </b>
    </div>
  );
}

export default App;

 

 

 

State (상태)

• Counter.js 예시)

// state 사용하기 위해 useState 임포트 필요
import React, { useState } from 'react';

const Counter = () => {
  // 0으로 초기화 -> useState(0)
  const [count, setCount] = useState(0);
  const [count2, setCount2] = useState(0);

  // setCount될 떄마다 Counter가 리렌더됨
  console.log('counter 호출');

  const onIncrease = () => {
    setCount(count + 1);
  };

  const onDecrease = () => {
    setCount(count - 1);
  };

  return (
    <div>
      <h2>{count}</h2>
      <button onClick={onIncrease}>+</button>
      <button onClick={onDecrease}>-</button>
    </div>
  );
};

export default Counter;

 

 

Props (Properties)

: 부모 컴포넌트가 자식 컴포넌트에 전달하는 값

 

⚠️ 값 뿐만 아니라 컴포넌트도 전달 가능하다.

• Container.js

const Container = ({ children }) => {
  return <div style={{ margin: 20, padding: 20, border: '1px solid gray' }}>{children}</div>;
};

export default Container;

 

• App.js

import Container from './Container';
import Counter from './Counter';
import MyHeader from './MyHeader';

function App() {
  console.log('App 호출');

  const counterProps = {
    a: 1,
    b: 2,
  };

  return (
    <Container>
      <div className="App">
        <MyHeader />
        <Counter {...counterProps} />
      </div>
    </Container>
  );
}

export default App;

 

✅ 컴포넌트는 본인이 가진 State, 부모에게 내려온 Props, 부모가 렌더링 될 때 리렌더링된다.

 

 

 

 

 

마무리

---

 

이번주 강의는 그래도 열심히 들었다. 😃

하루치 밀리긴 했지만 ㅎㅎ 나머지는 주말에 들어야지!