06.30 항해99 24일차

이번주 배운것 및 노트 :

컴포넌트 데이터(State)관리

ㄴ 생성, 업데이트, 삭제

 

단방향 데이터 관리, 단방향 데이터 흐름

:: 위에서 아래로만 흐른다.

 

클래스형 컴포넌트 내 데이터 관리:

setstate() : 클래스형 컴포넌트의 state 업데이트시 사용.

함수명 = () => {

this.setState({count: this.state.count+1});

}

 

**온클릭으로 함수 붙일 때.**

()를 붙이게 되면 즉시 실행.

<button onClick={this.함수이름}></button>

 

함수형 컴포넌트 내 데이터 관리:

useState()

const [name, 수정용함수명] = React.useState(초기값);

 

정돈 - Alt+Shift+f

 

스프레드 문법 : 

[…list,new_item]

 

불변성 관리 - 불변성 유지하며 관리하는 방법

 

 

이벤트 리스너 - 이벤트발생을 알려줌

돔이 사라질때 같이 사라지자 (componentWillUnmount 에서)

-어떤 이벤트인가 : 동작

-어떤 행동인가 : 함수 = (e)

Ex) this.객체명.current.addEventListener(“mouseover”,this.함수명)

this.객체명.current.removeEventListener(“mouseover”,this.함수명)

 

 

 

*랜더 밑 / 함수형 시 리턴위

Const nemo_count = Array.from({length: this.state.count},(v,i)=>i);

 

*뷰 앱 디브 안 / 함수 리턴 안

{nemo_count.map((num,idx)=>{

return(

<div

Key = {idx}

인라인 스타일>

반복될 디브내용</div>

)

})}

+ div 내부 고유 key값 붙이기

느낀것 :

어려워....

내게 아쉬웠던 것 : 

이해가 됐다고 생각했는데도 직접 해보면 와닿지 않아 하다가 보고 하다고 보고의 반복...

 

내일 할 일 :

.,.,. 과제 마무리...