React.js state, life-cycle, event

State
- Component에 대한 변경 가능한 데이터, 사용자가 정의
- 이미 정의된 state는 직접 수정할 수 없다. 수정이 필요한 경우 setState() 메소드 이용
- 정확히 말하면 직접 수정하면 리액트가 수정된 것을 인식할 수 없기에 메소드를 사용해야함
- strict 모드에서는 compile조차 안된다…
- constructor 생성자 : Component가 실행될 때 render 메소드보다 먼저 실행되면서 state 값을 초기화
- constructor(props) {super(props); 코드 작성 }
- this.state = {state명: {key : value}}
- 상위 컴포넌트의 state 값을 하위 컴포넌트의 props로 전달 = 은닉화
- li태그 등 여러개의 값을 다룰때 배열 형태로 state를 작성하여 props를 넘길 수도 있다.
- 여려 개의 element 자동 생성시 각 element들은 key(식별자)라는 props를 가져야한다.
Component Lifecycle Method
- componentDidMount() : 컴포넌트가 마운드 된 후 호출
- componentDidUpdate() : 컴포넌트 state 변경 등 re-render시 렌더링 완료 후 호출
- componentWillUnmount() : 컴포넌트 unmount 직전 호출
Event
- 이벤트 설치
- 클릭이벤트는 HTML에선 onclick=’’ 이지만 리액트에서는 onClick={}의 형태로 작성
- Arrow Function 사용 안하고 onClick에 함수 정의하면 bind(this) 붙여주어야한다.
- Arrow Function의 this는 상위 스코프의 this를 가르키기 때문
- 상위 컴포넌트(App)에서 하위 컴포넌트에 이벤트 걸때 onChangePage를 props의 형태로 전달할 수 있다.
- 하위 컴포넌트에선 this.props.onChangePage()로 이벤트 설치