react 설치 및 기초

react 설치

처음 설치 할 때는 아래 명령어를 사용하여 설치한다.

npx create-react-app 프로젝트명

 

설치 후 해당 경로에서 npm start를 하면

위 이미지와 같이 실행된다.

 

app.js에서 수정 후 저장하면 바로 적용이 된다.

 

react에서 css 사용하기

1. 인라인 스타일 css

인라인 스타일의 css를 사용하기 위해서는 객체 형태로 사용해야 한다.

<h1 style={{color:'#f00', backgroundColor:'yellow'}}>안녕</h1>

또한 대시 - 대신 카멜 케이스로 작성해야 한다.

하지만, 인라인 스타일 css는 많이 사용되지 않는다고 한다.

 

2. 전역 css

전체에 적용되는 css로 사용하는 방법이 있는데, 이 방법은 클래스명이 같을 경우 스타일이 덮어 쓰인다.

(기존에 사용하던 방식이라고 생각하면 된다.)

css 스타일이 head 태그 안에 style 태그에 다 들어가기 때문에 전체 페이지에 영향을 주게 된다.

 

3. css를 모듈별로 분리

컴포넌트 별로 css를 작성하여 필요한 곳에서 import 하여 사용하는 방식이다.

import styles from "./Hi.module.css";
const Hi = () => {
  return (
  <div>
    <h1 style={{color:'#f00', backgroundColor:'yellow'}}>Hi</h1>
    <div className={styles.box}>Hello</div>
  </div>
  );
}

 

필요한 css 파일을 import styles from "경로" 가져온 후 {styles.클래스명}으로 사용한다.

여러 컴포넌트에서 같은 이름의 클래스명으로 사용해도 클래스명_해시값으로 구분되기 때문에 전체 페이지에 영향을 주지 않고 필요한 부분에만 스타일을 적용할 수 있게 된다.

 

주석

{/*  */} 를 사용하여 주석을 작성할 수 있다.

function App() {
    return (
        <div className="App">
          {/* 주석은 이렇게! */}
          <h1>hi</h1>
        </div>
    );
}

 

이벤트 처리

함수를 만들어서 전달하거나, onClick 에서 함수를 직접 만들어서 이벤트를 처리할 수 있다.

이때, onClick 은 카멜 케이스로 작성하며, {} 안에 함수명으로 넣지 않고 함수명() 이렇게 넣으면 함수가 반환하는 것을 넣는게 되기 때문에 주의해야한다.

const test = () => {
  function showColor(){
    console.log("blue");
  }

  function showNum(num){
    console.log(num);
  }
  return (
  <div>
    <button onClick={showColor}>Show color</button>
    <button onClick={
      () => {
        showNum(222)
      }
    }>Show num</button>
  </div>
  );
}
export default Hello;