[react] Props, State

public파일 : start를 할 때 파일을 찾는 document root

• component는 하나의 최상위 태그로 시작해야 한다.

class Subject extends Component {
  render(){
    return (
      <header>
        <h1>WEB</h1>
        world wide web!
      </header>
    )
  }
}

-> 위 태그에서는 header가 최상위 태그

하지만 현재 <></>로 최상위 태그를 없앨 수 있다.
-> 최신 문법이라 오류가 난다면 <React.Fragment></React.Fragment>로 대체가능 (babel로 해결할 수도 있다.)

웹브라우저는 이세상에 react가 존재하는지 모른다.
react가 최종적으로 react코드로 변환해서 전달한다.

props / State

props : 사용자의 ui 제공
status : 내부 조작 장치 (내부 값 제공), 바뀌는 부분이다
예) 좋아요 버튼에서 버튼을 누르면 좋아요누름 으로 안에 텍스트가 바뀌는데 여기서 state는 좋아요라는 텍스트이다.

props

class Subject extends Component {
    render(){
      return (
        <header>
          <h1>{this.props.title}</h1>
        {this.props.sub}
        </header>
      )
    }
  }

• {this.props.title}

State

class App extends Component {
  constructor(props){
    super(props)
    this.state = {
      subject:{title:'WEB', sub:"World Wide Web!"}
    } // state값 초기화
  }
  render(){
  return (
    <div className="App">
       <Subject 
   	  title={this.state.title} 
  	   sub={this.state.sub}>
       </Subject>
    )
   }
  }

어떤 컴포넌트가 실행될때 render보다 먼저 실행되며 초기화 해주는 코드를 constructor 안에다가 코드를 작성한다.

title은 props 그 안에 값 {this.state.title} 은 state

• 코드를 보고있는 입장에서는 내부적으로 state값이 subject가 있는지 모른다 (index.js에는 단지 App이라는 코드가 존재하는 것만 보인다.)

  외부에서 알필요가 없는 정보를 숨기는게 좋은 사용성을 만드는 핵심 (예> 전선이 밖으로 나오면 좋지 않음)

• App이 내부적으로 사용 할 상태는 state라는 형태를 통해서 사용

• 상위 컴포넌트의 state의 값을 하위 컴포넌트의 props의 값으로 사용하는 것은 가능하다 (위 예제도 상위 컴포넌트인 App의 state값을 하위 Subject의 props값으로 전달하고 있다.)

   <Subject title={this.state.title}> 
   // 상위 App의 state값인 title을 Subject의  Props값으로 전달

  props와 state의 정의

  

  컴포넌트 밖에서는 props를 바꿀 수는 있지만 내부적으로는 바꿀 수 없다
  (state는 setState로 변경 가능)

• 상위 컴포넌트 -> 하위 컴포넌트로 값을 전달 할 때에는 props로 전달
• 하위 컴포넌트 -> 상위 컴포넌트로 값을 전달 할 때에는 event를 통해 전달
  (props는 못바꿈)

반복문 활용

• App

  class App extends Component {
  constructor(props){
    super(props)
    this.state = {
      contents:
      [{id:1, title:'HTML', desc:'html is...'},
      {id:2, title:'CSS', desc:'CSS is...'} 
      //참고1
    ]
   } 
  }
   render(){
  return (
     <div className="App">
      <List data={this.state.contents}></List>
     </div>
    );
   }
  }

• list

  class List extends Component{
    render(){
      const data = this.props.data;
      const lists = [];
  
      data.forEach((content) => {
        lists.push(
        <li key={content.id}><a href={content.id + '.html'}>
          {content.title}</a></li>
        )  
      })
      return(
        <nav>
           {lists}
        </nav>
      )
    }
  }

  여러개의 목록을 자동으로 생성할 때에는 리액트는 key값을 원하기 때문에 key값을 넣어준다.

• 부모인 App은 state라는 내부 정보를 사용
  자식에게 전달할 때는 props로 전달

• 참고1 > app입장에서는 내부가 어떻게 돌아가는지 알 필요가 없고 data라는 props는 어떤 형태의 정보를 전달하면 되는가 하는 사용자 입장에서 알아야 할 것만 알면 된다.

• 참조 : 생활코딩