🍎 2021.03.16 🍎

프로젝트를 하는 데에 있어서 가장 큰 문제점은 내가 제대로 리액트의 구조나 컴포넌트 데이터를 다루는 방법을 모르고 막 사용하는 것이라고 생각했다.
그래서 조금 조급함을 느끼더라도 이를 학습하고 다시 재정비하는 시간이 필요하다고 생각했다.

컴포넌트데이터 다루기 : props / state

  1. props
  • https://youtu.be/1HWlWWnkNcU
  • props는 component 내에서 갱신되지 않는다
  • 부모 컴포넌트 state와 자식 컴포넌트로 props 전달 사이의 관계

a) state 변수를 선언

this.state = {
  book: 'React Native in Action'
}

b) state 변수를 갱신하는 setState를 작성

updateBook() {
  this.setState({
    book: 'Express in Action'
  })
}

c) 메서드와 state를 props로 자식 컴포넌트에 전달

<BookDisplay
	updateBook={ () => this.updateBook() }
    book = {this.state.book} />

d) 메서드를 자식 컴포넌트에 있는 터치 핸들러에 연결

<Text onPress = {this.props.updateBook}>

  1. state
  • 컴포넌트 안에 state / state는 this.setState()를 통해 갱신됨
  • this.setState() : 호출될 때마다 render 메서드 재호출
  • 컴포넌트에서 생성, 컴포넌트에서만 갱신, 컴포넌트 내부에서 변경 가능
profile
코딩 천재만재가 되고 싶은 코린이💻🍎 EWHA BCS & SW

0개의 댓글