리액트 기초 [component/ css]

강의 출처 : 코딩앙마 리액트 기초 강좌 1강~5강

 

리액트 시작 방법

컴퓨터 터미널에서 npx create-react-app 파일이름 입력하면 패키지 설치 및 react 파일이 만들어진다.

vscode에서 해당 파일을 연다.

vscode에서 터미널을 연 후, npm start 를 입력한다.

 

기초 실습 - 내 블로그로 이동하기

컴포넌트 component

컴포넌트란 프로그래밍에 있어서 재사용이 가능한 각각의 독립된 모듈이다.

레고 블럭처럼 사용할 수 있는 블럭 단위라고 생각하면 된다.

안드로이드의 View랑 비슷한 단위인 것 같다.

 

[World.js]

export default function World() {

return <h3>World!</h3>

}

이런 식으로 하나의 파일로 만들어 준 후, 다른 파일에서 import를 사용해 태그 형식으로 사용한다.

 

Component 파일 이름은 항상 대문자로 시작하도록 설정해준다.

 

- class는 자바스크립트 예약어이기 때문에 대신 className으로 사용한다.

 

p태그

<p>2+3</p> 는 2+3으로 출력되고,

<p>{2+3}</p> 는 5로 출력된다.

 

 

css

css는 헤더 부분에 종속되기 때문에 클래스 이름이 동일하면 오버라이딩이 발생해서 잘 적용되지 않고 다른 파일이더라도 같은 css가 적용될 가능성이 크다.

->이를 해결하기 위해서 module.css파일을 사용해준다.

 

module.css

앞부분은 보통 component의 이름에 맞춰서 적어준다. (Hello 컴포넌트에 대한건 Hello.module.css로 작성)

파일 안에 css 내용을 적어주고, 사용하고 싶은 파일에서는 

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

이런 식으로 styles로 import  받아서 

<div className={styles.box}>Hello</div>

이렇게 style 속성으로 사용해준다.