2. props 다루기

특징

 1) props는 부모 컴포넌트로 부터 전달된 속성 값이나, 상속 받은 값이다.

 2) 컴포넌트에 상속이 되고나면 props 값은 변경이 불가능 하다.

 

 

1. 정적 props

// 부모
export default class App extends Component{
  
  render(){
    return(
      // 자식에게 props 로 값 전달.
      <BookDisplay 
        book='리엑트 네이티브 in Action'
        note={"이건 다른 props지롱"}/>
    );
  }
}


// page 74
// 자식
class BookDisplay extends Component{
  render(){
    return(
      //부모로 부터 전달 받은 값은 자식 컴포넌트에서 this.props.이름  으로 사용 할 수 있다.
      <View>
        <Text>{this.props.book}</Text>  
        <Text>{this.props.note}</Text>
      </View>
    )
  }
}

 

2. 동적 props : 외부를 통해서 변하는 속성

// 부모
export default class App extends Component{

  state = {
    testValue: '테스트 값 입니다.',
    testValue2: '테스트 값2 입니다.'
  }
  
  render(){
    let book1='리엑트 네이티브 동적 props'
    let note1=this.state.testValue
    return(
      // 자식에게 props 로 값 전달.
      <BookDisplay 
        book={book1}
        note={note1}
        note2={this.state.testValue2}/>
    );
  }
}


// page 74
// 자식
class BookDisplay extends Component{
  render(){
    return(
      //부모로 부터 전달 받은 값은 자식 컴포넌트에서 this.props.이름  으로 사용 할 수 있다.
      <View>
        <Text>{this.props.book}</Text>  
        <Text>{this.props.note}</Text>
        <Text>{this.props.note2}</Text>
      </View>
    )
  }
}

 

3. 동적 props 갱신하기

// 부모
export default class App extends Component{

  constructor(){
    super()
    this.state = {
      book:'리엑트 네이티브 인 액션'
    }
  }

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

  render(){
    return(
      // 자식에게 props 로 메서드와 값 전달.
      <BookDisplay 
        updateBook={()=>this.updateBook()}
        book={this.state.book}
        />
    );
  }
}


// page 74
// 자식
class BookDisplay extends Component{
  render(){
    return(
      //부모로 부터 전달 받은 값은 자식 컴포넌트에서 this.props.이름  으로 사용 할 수 있다.
      <View>
        <Text
          onPress={this.props.updateBook}>
          {this.props.book}
      </Text>  
      
      </View>
    )
  }
}

 

4. 구조분해 할당 ( 비구조화 )

  : 객체에서 속성들을 가져와서 앱에서 바로 변수로 사용. (DRY 원칙 )

 

const person = {name:'woong', age:99 }

const {age} = person

 

예시 작성

// 부모
export default class App extends Component{

  constructor(){
    super()
    this.state = {
      book:'리엑트 네이티브 인 액션'
    }
  }


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

  render(){
    
    const {book} = this.state
    

    return(
      // 자식에게 props 로 메서드와 값 전달.
      <BookDisplay 
        updateBook={()=>this.updateBook()}
        book={book}
        />
    );
  }
}


// page 80
// 자식
class BookDisplay extends Component{
  render(){
    const {updateBook,book} = this.props
    return(
      <View>
        <Text
          onPress={updateBook}>
          {book}
      </Text>  
      
      </View>
    )
  }
}

 

5. 상태가 없는 ( stateless) 컴포넌트에서 Props

-stateless  컴포넌트에서 props를 사용하는 방법

 

부모컴포넌트에서 자식 컴포넌트에게 인수를 전달한다.

 

// 부모
export default class App extends Component{

  constructor(){
    super()
    this.state = {
      book:'리엑트 네이티브 인 액션'
    }
  }


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

  render(){
    
    const {book} = this.state
    

    return(
      // 자식에게 props 로 메서드와 값 전달.
      <BookDisplay2 
        updateBook={()=>this.updateBook()}
        book={book}
        />
    );
  }
}  // root 컴포넌트

// stateless 컴포넌트 방식
function BookDisplay2({updateBook,book}){
  return (
    <View>
    <Text
      onPress={updateBook}>
      {book}
    </Text>  
    </View>
  )
}

const BookDisplay3 = ({updateBook,book}) =>{
  return (
    <View>
    <Text
      onPress={updateBook}>
      {book}
    </Text>  
    </View>
  )
}

stateless 컴포넌트를 함수형(function) 컴포넌트라고도 하는데, 자바스크립트에서 함수로 작성할수 있기 때문다.

 

6. 배열과 개체를 props으로 전달하기.

위의 5. 와 동일하다.

// 부모
export default class App extends Component{

  constructor(){
    super()
    this.state = {
      book:'리엑트 네이티브 인 액션',
      leapYear:true,
      info:{
        type:'programing'
      }
    }
  }


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

  render(){
    
    const {book} = this.state
    

    return(
      // 자식에게 props 로 메서드와 값 전달.
      <BookDisplay4
        leapYear={this.state.leapYear}
        info={this.state.info}
        topics={['red','blue','green']}
      />
    );
  }
}  // root 컴포넌트
// 배열과 객체 전달하기.
const BookDisplay4=(props)=>{
  let leapYear
  let {topics}=props
  const {info}=props

  topics=topics.map((topic,i) =>{
    return <Text>{topic}</Text>
  })

  if(props.leapYear){ // 이게 true라면
    leapYear=<Text>this is a leapYear!!!</Text>
  }else{
    leapYear=<Text>this is not a leapYear OTL...</Text>
  }

  return(
    <View>
      {leapYear}
      <Text>BookType : {info.type}</Text>
      {topics}
    </View>
  )


}