[React] 초보자를 위한 리액트 강좌 1

프로그래밍/React

[React] 초보자를 위한 리액트 강좌 1

라다디 2022. 1. 9. 05:26

설치(create-react-app)

npx create-react-app [프로젝트명]

* 강의에서는 npx create-react-app voca

npx는 npm에 올라가있는 패키지를 바로 실행해서 설치시켜주는 도구

npm start

웹브라우저 열기

node_modules

프로젝트를 실행할 때 사용되는 dependency 모듈이 모아져있는 폴더

이 폴더에 설치된 모듈들은 모두 package.json파일에 기록되어 있음

따라서 node_modules를 지우더라도 package.json가 있는 상태에서

npm install만 해주면 다시 설치 가능

깃허브에 올리지 않는 폴더

package.json이 있으므로 다른 개발자도 동일한 환경을 구축할 수 있음

Hot Module Replacement (HMR)

브라우저 리로드 없이 모듈을 바꿔치기 해주는 것

컴포넌트, JSX

리액트로 만든 페이지는 컴포넌트로 구성되어 있음

비슷한 부분들 코드 재사용, 유지보수 용이

컴포넌트 이름은 대문자로 시작

함수 컴포넌트가 리턴하는 것은 JSX(Javascript XML)

class는 자바스크립트 예약어이기 때문에 className으로 작성

자바스크립트 변수는 {}로 감싸고 사용

숫자나 문자열과 달리 불리언 타입이나 객체는 표현 불가능

// App.js
import "./App.css";

function App() {
  const name = "Mike";
  const naver = {
    name: "네이버",
    url: "https://naver.com",
  };
  return (
    <div className="App">
      <h1
        style={{
          color: "#f0f",
          backgroundColor: "green",
        }}
      >
        Hello, {name}.<p>{2 + 3}</p>
      </h1>
      <a href={naver.url}>{naver.name}</a>
    </div>
  );
}

export default App;

새로운 컴포넌트는 src 폴더 밑에 component 폴더를 만들고 그 안에 넣음

@ Hello 컴포넌트 만들기

// Hello.js

/* 컴포넌트 작성하기 */

// (1)
const Hello = function () {
  return <p>Hello</p>;
};

export default Hello;

// (2) 화살표 함수 사용
const Hello = () => {
  return <p>Hello</p>;
};

export default Hello;

// (3) 한 줄로 작성
export default function Hello() {
  return <p>Hello</p>;
}

App.js에서 import Hello from "./component/Hello"

끝에 .js는 빼도 됨

import "./App.css";
import Hello from "./component/Hello";

function App() {
  return (
    <div className="App">
      <Hello />
    </div>
  );
}

export default App;

@ Welcome 컴포넌트 만들어서 App에 포함

// Welcome.js
export default function Welcome() {
  return <h1>Welcome</h1>;
}

// App.js
function App() {
  return (
    <div className="App">
      <Hello />
      <Welcome />
    </div>
  );
}

@ World 컴포넌트 만들어서 Hello에 포함시키기

// World.js
export default function World() {
  return <h1>World</h1>;
}

// Hello.js
export default function Hello() {
  return (
    <div>
      <p>Hello</p>;
      <World />
    </div>
  );
}

JSX는 하나의 태그만 만들 수 있기 때문에 div 태그로 감싸줌

div 태그가 아니라 빈 태그여도 상관 없음

현재 구조

function App() {
  return (
    <div className="App">
      <Hello />
      // 한 번 만든 컴포넌트는 얼마든지 재사용 가능
      <Welcome />
      <Welcome />
      <Welcome />
    </div>
  );
}

CSS

1. 인라인 스타일

인라인 스타일을 사용할 때 style은 객체로 전달해야 적용

속성들은 카멜케이스로 작성

문자열은 따옴표로 감싸주고 숫자는 그냥 써줘도 됨

특별한 이유가 없으면 인라인으로 작성하는 것은 지양

<h1
  style={{
    color: "#f00",
    borderRight: "2px solid #000",
    marginBottom: "30px",
    opacity: 0.5,
  }}
 >
   Hello
</h1>

2. [컴포넌트명].css파일

create-react-app으로 프로젝트를 생성하면 초기에 App.css와 index.css가 있음

내용을 살펴보면 index.css는 전체 스타일에 영향을 미치는 코드들이 있고

App.css는 App 컴포넌트에 한정된 내용들이 있음

하지만 App.css는 사실 App 컴포넌트에만 적용되고 있지 않음

// App.js
function App() {
  return (
    <div className="App">
      <Hello />
      // box 추가
      <div className="box">App</div>
    </div>
  );
}

// App.css
.box {
  width: 100px;
  height: 100px;
  background-color: red;
}

// Hello.js
import "./Hello.css";

export default function Hello() {
  return (
    <div>
      <h1
        style={{
          color: "#f00",
          borderRight: "2px solid #000",
          marginBottom: "30px",
          opacity: 0.5,
        }}
      >
        Hello
      </h1>
      // box 추가
      <div className="box">Hello</div>
    </div>
  );
}

// Hello.css
.box {
  width: 200px;
  height: 50px;
  background-color: blue;
}

결과

두 컴포넌트의 box의 생김새가 똑같음

개발자 도구를 살펴보면 같은 클래스명이라서 오버로딩된 것을 볼 수 있음

결론적으로 말하자면 css파일들은 각 컴포넌트에 종속되는 게 아님

개발자 도구로 확인해보면 헤드 안에 다 같이 작성이 된 것을 볼 수 있는데 이로인해 전 페이지에 영향을 미침

3. [컴포넌트 명].module.css

각 컴포넌트에 특화된 css를 작성하기 위해서는 [컴포넌트 이름].module.css 이런식으로 작성해줌

import 할 때는

import styles from "./[컴포넌트 이름].module.css";

styles라는 객체 생성됨

적용할 때는 {styles.box}이런 식으로 적음

// Hello.js
import styles from "./Hello.module.css";

export default function Hello() {
  return (
    <div>
      <h1
        style={{
          color: "#f00",
          borderRight: "2px solid #000",
          marginBottom: "30px",
          opacity: 0.5,
        }}
      >
        Hello
      </h1>
      <div className={styles.box}>Hello</div>
    </div>
  );
}

// App.js
import styles from "./App.module.css";
import Hello from "./component/Hello";

function App() {
  return (
    <div className="App">
      <Hello />
      <div className={styles.box}>App</div>
    </div>
  );
}

export default App;

결과

개발자도구로 살펴보면 클래스 이름이 다음과 같이 컴포넌트명, 클래스명, 해시값으로 이루어진 것을 볼 수 있음

따라서 동일한 이름으로 작성하더라도 서로 중복될 일이 없음

📌 아래 강의의 내용을 정리한 글입니다.

코딩앙마 - 초보자를 위한 리액트 강좌