Develop/React.js

[React]class를 이용한 옛날 React 문법 / 리액트 사이트 build 하고 github pages 로 배포

dawonny 2022. 8. 4. 02:27
728x90
반응형

class 문법

 

컴포넌트 만들때에는 function을 사용한다.

근데 예전에 리액트 배웠을 때에는 class 문법을 배웠었다.

(지금은 function 을 많이 쓰는 편인 것 같다.)

function Modal(props) {
  return (
    <div className="modal" style={{ background: props.color }}>
      <h4>{props.title[props.detailTitle]}</h4>
      <p>date</p>
      <p>detail</p>
      <button>글수정</button>
    </div>
  );
}

이런 Modal 컴포넌트를 class 문법으로 작성하면

class Modal2 extends React.Component {
  //Modal function을 class로 만들기
  constructor(props) {
    super(props);
    this.state = {
      name: "kim",
      age: 20,
    };
  }
  render() {
    <div>
      안녕 {this.state.name} {this.props}
      <button
        onClick={() => {
          this.setState({ age: 21 });
        }}
      ></button>
    </div>;
  }
}

이렇게 표현이 가능하다.

저 class 안에 constructor, 이 안에는 super() 가 들어가고

constructor 아래에는 render() {}  가 들어간다.

 

state 는 super 아래에 this.state 식으로 만들어주고

state 변경을 할때에는 setState 를 사용한다.

 

props 를 사용하고 싶다면 constructor 와 super 안에 props를 써준다. 

 

 

컴포넌트 만들일이 있으면 웬만하면 function 을 쓰려고 한다.

하지만 class 문법을 쓰는 옛날 리액트 프로젝트를 볼일이 있을 수도 있으니까 

일단 알아두도록 해야겠다.

만든 사이트를 배포하려면 App.js 를 그냥 올리는게 아니라 build 용 파일을 생성해서 이걸 올려야한다.

build 를 하면(이 방법은 아래에) index.html 파일이 생성되고 만약 내가 웹서버를 만들었다면 

 

어떤 사람이 ~~.com 으로 접속하면 build/index.html 파일 전송해라

이렇게 서버 api 만들면 배포가 됨,

 

 

 

build 하는 법

 

리액트 프로젝트에서 터미널 켜고

npm run build 를 입력한다.

그러면 build 라는 폴더가 생긴다.

이 폴더 안에 있는 내용을 모두 서버에 올리면 됨.

 

업데이트 사항이 생기면 build 다시 하고 그 파일 다시 업로드 해야.

 

(만약에 깃헙 페이지를 통해서 배포하고 싶으면 build 폴더 안의 내용물을 올리면 됨.)

728x90
반응형