[React Study] 생활코딩 React - 12. props ~ 15.3. key

 

React - 12. props

class TOC extends Component{
  render(){
    return(
      <ul>
        <li><a href="1.html">HTML</a></li>
        <li><a href="2.html">CSS</a></li>
        <li><a href="3.html">JavaScript</a></li>
      </ul>
    );
  }
}

- link 태그에는 a라는 것을 통해 이것이 태그라는 것을 알려줌

- 이것이 어떤 주소랑 연결되는지 알려줄 필요가 있음

- href="1.html" ➡ 태그의 속성(attribute)를 통해 알 수 있음

 

<Subject title = "WEB" sub = "world wide web!"></Subject>

➡ 위처럼 title과 sub title을 통해서 구별할 수 있다면 얼마나 좋을까?

 

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

class App extends Component {
  render() {
    return (
      <div className="App">
        <Subject title = "WEB" sub = "world wide web!"></Subject>
        <Subject title = "React" sub = "For UI"></Subject>
        <TOC></TOC>
        <Content>z</Content>
      </div>
    );
  }
}

- {this.props.title} 을 통해 쉽게 재사용 가능

 

React - 13. React Developer Tools

 

- React Developer Tool 크롬 확장 프로그램 설치

- F12키를 누르고 React 탭에 들어가면 이렇게 실시간으로 수정 가능

 

React - 14. Component 파일로 분리하기

- 각각의 컴포넌트별로 별도의 파일 정리

- component 라는 파일을 만들어 분류할 예정

- TOC.js 파일 만듬

import { Component } from 'react';

- 필수 코드

- 리액트라는 곳에서 컴포넌트를 사용

 

  export default TOC;

- 클래스를 가져다 사용할 수 있게 해줌

- 관련 코드를 index.js에서 지워도 결과는 똑같음

 

똑같은 결과~

React - 15.1. State 소개

사용자의 입장에서 장치를 조정하는 것들 ➡ 유저 인터페이스, 버튼 등등..

 

컴포넌트의 동작을 바꾸고 싶을 때 

➡ props

 

컴포넌트 내부에서 사용되는 것들은?

➡ State

 

 

React - 15.2. State 사용

class App extends Component {
  render() {
    return (
      <div className="App">
        <Subject title = "WEB" sub = "world wide web!"></Subject>
        <Subject title = "React" sub = "For UI"></Subject>
        <TOC></TOC>
        <Content title = "HTML" desc = "HTML is HyperText Markup Language."></Content>
      </div>
    );
  }
}

- App.js의 위 부분 코드를 수정할 것

 

class App extends Component {
  constructor(props){
    super(props)
  }

- 코드를 실행할 때 render() 함수보다 먼저 실행이 되면서 component를 초기화시켜 줄 때 위 코드 사용

class App extends Component {
  constructor(props){
    super(props)
    this.state = {
      subject:{title:'WEB', sub:'World Wide Web!'}
    }
  }

<Subject title = {this.state.subject.title} 
        sub = {this.state.subject.sub}></Subject>

- 코드를 이렇게 수정

- 저 코드에서 state 값이 subject가 있는지 없는지 알 수 없음 ⬅ 내부적으로 알 수 없음

- 외부에서 알 필요 없는 정보를 철저하게 은닉할 수 있는 것

- 상위 Component의 State 값을 하위 Component의 props 값으로 전달하는 것 가능

 

React - 15.3. Key

class App extends Component {
  constructor(props){
    super(props)
    this.state = {
      subject:{title:'WEB', sub:'World Wide Web!'},
      contents:[
        {id:1, title:'HTML', desc:'HTML is for information'},
        {id:2, title:'CSS', desc:'HTML is for design'},
        {id:3, title:'JavaScript', desc:'HTML is for interactive'}
      ]
    }
  }

- 코드 수정

 

import { Component } from 'react';

class TOC extends Component{
    render(){
      var lists = [];
      var data = this.props.data
      var i = 0;
      while(i < data.length){
        // key 값을 지정해 주어야 오류가 발생하지 않음
        lists.push(<li key = {data[i].id}><a href = {"/contents/" + data[i].id}> {data[i].title} </a></li>);
        i = i + 1;
      }
      return(
        <ul>
          {lists}
        </ul>
      );
    }
  }

  export default TOC;

- TOC.js 파일

 

class App extends Component {
  constructor(props){
    super(props)
    this.state = {
      subject:{title:'WEB', sub:'World Wide Web!'},
      contents:[
        {id:1, title:'HTML', desc:'HTML is for information'},
        {id:2, title:'CSS', desc:'HTML is for design'},
        {id:3, title:'JavaScript', desc:'HTML is for interactive'}
      ]
    }
  }

- App.js 파일