[생활코딩] React TIL 빠른 정리 #2

state 소개

 

props는 사용자가 component를 사용하는 입장에서 중요한 것이고
state는 그 props의 값에 따라서 내부에 구현에 필요한 데이터들

 

component의 기본적인 동작을 바꾸고 싶을 때 props를 이용하여 component를 조작가능하다.

component 내부적으로 사용되는 것들 그것들을 state 라고 한다.

 

외부의 props라는 것과 그 props에 따라 component를 구현하는 state는 철저히 구분되어 있어야 한다.

---

state 사용

 

render 함수보다 먼저 실행이 되면서 그 컴포넌트를 초기화 시켜주고 싶은 코드는 constructor 내부에 작성한다.

constructor(props) {
    super(props);
    this.state = {...}
}

외부 사용자는 state에 대해서 일절 알 필요가 없다.

---

key

자동으로 리스트를 html에 삽입하려고 한다면 key 값이 필요함.

---

debgger;
크롬 개발자도구를 쓸 때, 브라우저가 debugger에서 멍추고 source에서 다양한 정보를 볼 수 있음.

 

React를 사용할 때 일반적으로 DOM 요소가 생성된 후에 리스너를 추가하기 위해 addEventListener 를 호출할 필요가 없습니다. 대신 요소가 처음 렌더링될 때 리스너를 제공합니다.

---

onClick = {

this.setState({
    props: ...
})

}.bind(this) 

---

이벤트 setState 함수 이해하기 까지 봄 ->
새벽에 create 구현, 내일 중 생활코딩 react 다 끝내기 ->
react 개념 무기한 정리.