컴포넌트 기본형태-클래스형(16이전버전. 이후에는 함수형이 추가됨)
import { Component } from "react";
class 컴포넌트이름 extends Component{
render(){
return(
html양식을 넣으면 출력된다.
);
}
}
export default 컴포넌트이름;클래스형 장점 : react에서 component를 받아와서 상속
App.js에 들고와서 출력할 수 있다.
import 사용할 이름 from '위에 짠 컴포넌트 위치';되도록이면 위 컴포넌트 이름과 사용할 이름을 동일하게 하면 구분이 편하다.
정상적으로 적었다면 사용할 이름이나 위치를 Ctrl 키를 누르고 클릭하면 동일한 파일로 이동한다.
prop-속성이름과 값을 찾아옴
let {속성명,단일이면 중괄호 생략가능}= this.props;defaultProps : props이 전달되지 않았을 때 undefined 대신 기본으로 들어갈 값 지정. 컴포넌트 생성 파일의 생성코드와 export 코드 사이에 적으면 된다.
컴포넌트이름.defaultProps={
속성명:값
}State : 컴포넌트 안에서 사용되는 변수-컴포넌트 생성 파일 안에서 만들어야 한다. 속성값이므로 render 위에 만들어야 한다.
constructor(props){ - constructor를 사용하면 props를 따로 연결
super(props); - 부모쪽에 전달하기 위한 메서드
this.state{
변수명:값, 여러개는 ,로 구분
}
}render에서 쓰고 싶다면 위의 prop처럼 일단 변수명을 불러와야한다.
let {변수명,state에서썻던것과 동일하게} =this.state;예를 들어 값을 변경해서 변수에 넣을려면 this.setState를 사용한다.
this.setState({변수명:변경할 값})예를 들어 number:number+1 처럼 같은 거를 썼지만 앞의 number는 속성이름이고 뒤의 number는 위에서 속성에 해당하는 값을 받아온다.
참고로 setState에 해당하는 줄을 복사해서 써도 1개만 동작한다-비동기이기 때문
node-module은 github에 업로드 되지 않는다. 그러므로 다른곳에서 pull로 받아와도 실행이 되지 않는다. 그러므로 cmd나 powershell로 해당 폴더에 접근을 한 뒤 npm install을 입력해서 node-module 폴더를 생성해준다.