*주의* 내가 복사해놓은 부분 중에 앞에 // 이거는 내가 주석 처리한거다 같이쓰면 오류나고 나중에 다시쓸려고 지우지 않고 주석처리해서 코드에 영향안끼치고 지우지는 않게 하기 위해 만들어 놓은거다 *추가설명* 컴포넌트나 클래스를 이용해서 <div>hello</div>이런식으로 넣을때 최상위 요소는 하나만 있어야된다 즉 <div>hello</div> <div>hello</div> 이거는 최상위요소가 div 두개기때문에 오류가 나온다 하지만 이렇게 넣고싶으면React.Fragment를 활용하면 된다 <div> <div>hello</div> hello </div> 이거는 최상위요소가 div 하나기때문에 저상 작동한다.
class=정수 실수처럼 어떤 개념을 만드느거라고 생각하면 편하다 예를들면 모닝자동차를 클래스라고 하면 그내부에는 의자 변속기 오디오 등 여러가지 가 들어가있는 개념이 생긴거다 모닝자동차라고 하면 우리는 모닝자동차가 어떤건지 생각이 나듯이 그런 개념이다.
extends=이거는 상속 받는다고 생각하면 된다. 또 모닝자동차를 가져오자 이건 자동차에서 상속받은거다 우리가 모닝에 변속기 의자가 있는건 어떻게 알수있을까 바로 모닝 자동차도 자동차의 형식을 가져와서 만들어졌기때문이다 하지만 자동차랑 똑같지는 않다 다른부분을 추가된게 있을것이다.
즉 class 모닝자동차 extends 자동차 일런 느낌이다.
ClCom이거 내가 대충 만든 이름이다 ㅎㅎ
React.Component이거는 저번게시물에서 설명했듯이 React에서 Component 라는 것을 가져온것이다.
render(){
return<div>hello</div>;
}
이부분을 알아보자 아까 render라느게 있었지만 이건 다른거다 <div>hello</div>이거를 반환해주는 다른함수다 함수도 이름마다 특정한 기능을하도록 미리 정해놓은게 있다 이것도 그중하나라고 생각하면 편하다.
return(<div><h1>{props.message} 이것은 함수로 만든 컴포넌트</h1></div>);
}
이부분 괄호안에 props가 뭔지 모를것이다. 저기는 함수를 부를때 같이 전달해주느 데이터를 보관하는 변수라고 생각하면 된다.
헤까릴수 있으니 class 내부에 있는것을 하나씩 따로 빼와서 설명하겠다
state={
count:0
}
요거 state 한국어로 상태 즉 클래스 내부에서 변수를 만들어서 값을 저장할려면 여기안에서 만들고 저장해야 한다.
그래야지 클래스에서 쓸수 있다.
constructor(props){
super(props);
this.state={count:0};
}
이거는 constructor 생성자 즉 클래스를 생성하는 순간 실행되는 함수다
super 이건 즉 클래스가 상속 받아을때 상속을해준 그데이터들을 사용하기 위해 쓰는거다 그래서 전달받은 요소를 수정하는 데이터일수도 있어서 전달받은 데이터를 같이 보내준다.
this.state={count:0};여기서 this를 씀으로써 부모클래스가 아닌 자기자신 클래스인것을 알 수 있게 해주고
자기자신의 state에 count:0이라는 것을 만들어 주는 거다
사실상 count의 기본값을 0으로 해주는거다
componentDidMount(){
setTimeout(()=>{
// this.setState({
// count:this.state.count+1
//})
this.setState((pre)=>{
constnewst={count:pre.count+1}
returnnewst;
})
},1000)
}
componentDidMount이거는 컴포넌트가 특정지역에 적용될때 실행되는 함수다 단순히 자동으로 실행된다고 이해해도 지금은 문제가 없다.
setTimeout(실행할것,시간)이거는 시간에 적힌 숫자 만큼 지나가 실행할것이 실행 된다. 시간의 단위는 ms 1000=1초
constnewst={count:pre.count+1}이건 헤깔리수 있다 설명 하겠다 pre는 위에서 설명했듯이 내가 만든 전달받은 데이터를 저장할 변수이다. newst라는 변수에 이름이 count 이고 전달받은데이터를 저장한 변수 pre에 있는 count의 내용에 1을더한값을 내용으로 저장한다. 즉 pre.count가 1이면 count:2 라는 것이 newst 에 저장된다.
