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 폴더 안의 내용물을 올리면 됨.)
