[React.js] state 사용법

state 😏

constructor(props)를 통해서 초기화, 변경 가능

constructor() {} 안에서 반드시 super(props)를 통해 부모 컴포넌트의 생성자를 호출해야한다.

안하면 에러 발생

렌더링 이후 값 수정하려면 this.state = "변경할 값" 이렇게 사용하면 절대 안되고 setState() 함수를 이용해 수정

위에서 만든 Counter Component에 constructor()를 이용해서 데이터 초기화, super(props)를 통해서

부모 컴포넌트의 생성자를 호출한 다음 this.state = {...}에 초기화할 객체를 선언

그리고 핸들러에서 this가 무엇을 나타내는지 알 수 있도록 생성자에서 아래처럼 change 메소드를 현재 컴포넌트를 바인딩한 함수로 수정해야 함

this.change = this.change.bind(this);

위의 코드는 생성자에서 state값의 id의 초기값을 "Iron Man"으로 설정한 다음 버튼 클릭 시 아이디값을 

setState를 통해 "lsy"로 수정하는 간단한 코드임

만든 컴포넌트를 최종적으로 화면에 렌더링 하기 위해서 ReactDOM.render() 사용

ReactDOM.render()의 1번 째 parameter는 렌더링할 component, 2번 째 parameter는 렌더링할 element(div id="root")

복기하는 차원의 간단한 프로그램 개발

Props 😊

부모 컴포넌트가 하위 컴포넌트에게 데이터를 전달하기 위한 요소(읽기 전용)

전달받은 자식에서는 props의 값을 변경할 수 없음

개인공부를 기록하는 공간이라 틀린 점이 있을 경우 댓글 부탁드립니다.