[React] 주요개념 💯️

주요개념 💯️

• react의 필요성 : component를 사용해서 html처럼 작성하려는 경우에 필요 / 이를 위해 react는 JSX 문법을 사용

component

• html을 반환하는 함수
• js의 함수처럼 재사용성이 높음

// src/index.js
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';

ReactDOM.render(
  <App />, 
  // 이게 바로 Component (이렇게 사용하는 것임)
  document.getElementById('root')
);

• 아래와 같이, 두개의 Component를 렌더링할 수는 없음 ❌️

ReactDOM.render( <App /> <Potato />, document.getElementById('root'));

• react application은 한 번에 하나의 Component만 렌더링함
• 따라서 (기준이 되는) 하나의 application안에, 많은 Component를 넣을 수 있음 -> 해당 파일에서 불러옴
• 그리고 이러한 Component안에 더 많은 Component를 import할 수 있음
• like this

// src/App.js
import React from "react"
import Potato from "./Potato" 	// Potato를 사용하기 위해 import

function App() {
  return (
    <div className="App">
    <Potato/>
      Hello Willy❤️!
    </div>
  );
}

export default App;		// App을 내보내기 위해 export

JSX로 Component에 정보를 보낼 수 있다

• App component에서 Food component로 정보를 보내고
  Food component에서 받은 정보를 어떻게 사용할까?
  <Food / name = "kimchi"> 와 같이 커스터마이징한 속성에 담아서 사용한다.
  => "/ Food 컴포넌트에 / name이라는 property name을 사용해서 / "kimchi"라는 value를 주겠다."는 의미

// src/App.js

import React from "react"

function Food (props) { 	// props는 obj
// 인자로 👉️ {name} or props.name or props 처럼~ 편한 방식으로!
  console.log(props) 		// {name: "kimchi", something: true, lala: Array(5)}
  console.log(props.lala) 	// [1, 2, 3, "jung", "eun"]
  console.log({name}) 		// {name: "kimchi"}

  return (
  <h1> i like {props}</h1> 	// 이 경우, 객체가 react child로 유효하지 않다는 에러가 뜬다.
  <h1> i like {props.lala}</h1> // i like 123jungeun // 배열의 el들이 모두 string type으로 출력된다.
  <h1> i like {props.lala[3]}</h1> // i like jung // 넘겨주는 데이터에서 필요한 데이터를 꺼낼 수 있다.
  <h1>  i like {name}</h1> 	// i like kimchi
  )
}

function App() {
  return (
    <div className="App">
      hello willy❤️!
      <Food 
        name = "kimchi"
        something = {false}
        lala = {[1,2,3,"jung", "eun"]}
        />
        // Food 컴포넌트에 / name이라는 property name을 사용해서 / "kimchi"라는 value를 주겠다.
    </div>
  );
}

export default App;

class component

class App extends React.Component {
  constructor(props) {
    super(props)
  }
  
  render() {
    return (
      <div>Hello Willy💕️</div>
    )
  }
}

constructor

• component를 생성할 때, state 값을 초기화하거나 or 메서드를 바인딩하기위해 사용한다.
• react component의 생성자(constructor)는 해당 component가 마운트되기 전에 호출된다.
• 또한, React.Component를 상속한 컴포넌트(App)의 생성자(constructor)를 구현할 때는 super(props) 선언을 해야한다. / super(props)로 상속을 받아온다.
• 이유는? super() 전에 this는 허용되지 않으며, super()가 불리지 않으면, this가 초기화되지 않는다.
• 이유는? this.props를 사용할 때, 생성자 내에서 정의되지 않으면 에러 가능성이 크기 때문이다.

this.state

• 생성자 내에서 this.state로 초기값을 할당한다.
• 생성자(constructor(){ _here_ }) 내에서만 this.state로 초기값을 직접 할당할 수 있다.
• 이 this.state를 변경하기 위해 사용하는 것이 setState이다.
• 생성자 내에서는 외부API를 호출할 수 없기 때문에, 생성자 밖에서 componentDidMount()를 통해서 해줄 수 있다.
• 아래의 예제를 참고

class App extends React.Component {
  constructor(props) {
    super(props) 
    this.state = {
      videos : [],
      isLoading : true,
      queryString: ""
    }
    this.searchVideo = this.searchVideo.bind(this)
  }
  componentDidMount () {
    this.searchVideo('start') // App.searchVideo
  }
  // searchVideo 의 내용이 길어서 따로 빼줌
  searchVideo (queryString) {
    const key = "_나의 유튜브 API KEY_"
    fetch (`https://www.googleapis.com/youtube/v3/search?part=snippet&key=${key}&q=${queryString}&type=video&videoEmbeddable=true&maxResults=10`)
    .then(res => res.json())
    .then(json => {
      this.setState({
        videos : json.items,
        isLoading : false
      })
    })
  }
}