210406_TIL

React Hooks

함수 컴포넌트에서 state를 가질 수 있게 해준다.
함수형 컴포넌트에서 생명주기를 useEffect로 다룰 수 있다.
상태관리를 좀 더 쉽게 해준다.
메소드를 바인딩 할 필요가 사라진다.
비동기적이긴 하지만 비동기 걱정 없이 코드를 짤 수 있다.

useState

import React, {useState} from 'react';

function Counter () {
  // 기본적인 useState()사용 방법
  const [state, setState] = useState(0);
  // `useState(초기값)` 이렇게 초기값을 주면 `state`는 초기값으로 설정된다
  // 그리고 setState를 통해 상태를 관리할 수 있다
  
  const increase = () => {
    setSate(state + 1)
    // setState에 직접적으로 상태를 변화시키는 값을 전달하여 state를 관리할 수 있다
  }
  
  const decrease = () => {
    setState(prevState => prevState + 1)
    // 다음 state를 어떻게 할지 짜여진 로직함수를 전달하여 state를 관리할 수도 있다
  }
  
  return (
    <>
      <h1>{state}</h1>
      <button onClick={increase}>+</button>
      <button onClick={decrease}>-</button>
    </>
  )
}

useEffect

컴포넌트 렌더시 1회 작동
두 번째 인지 요소가 변화함에 따라서 작동

사진: cDM처럼 활용

첫 번째 인자는 함수를 받는다.
useEffect(func)
=> 두 번째 인자에 아무것도 주지 않으면 cDM, cDU, cWU 세가지 함수가 전부 있는 것처럼 실행된다

useEffect(func, [빈배열])
=> 두 번째 인자에 빈 배열을 주게 되면 cDM처럼 처음 마운트 될 때만 실행되게 활용할 수 있다

useEffect(func, [state])
=> 두 번째 인지에 state를 넣어주게 되면 cDU처럼 setState가 작동되어 렌더 될 때마다 함수를 실행 시킬 수 있다

useEffect(func, [ele1, ele2])
=> 두 번째 인자에 state를 여러 개 넣을 수 있다

useEffect(func, [element1])
useEffect(func, [element2])
=> useEffect를 중복 사용해도 상관 없다

그러뭍기

구조분해 할당

객체안의 속성으로 객체가 있으면 이와 같이 구조 분해 할당할 수 있다.

const mockMovie = {
  movie: {
    id: 5511,
    url: 'https://yts.lt/movie/deadpool-2016',
    title: 'Deadpool',
    year: 2017,
    rating: 8.6,
    runtime: 107,
    },
  movie2: {
    id: 1266,
    url: 'https://yts.lt/movie/furious-7-2015',
    title: 'Furious 7',
    year: 2016,
    rating: 7.1,
    runtime: 136,
    genres: ['Action', 'Adventure', 'Crime', 'Thriller', 'Mock'],
  }
}

function func({movie : {id, url, title}}) {
  console.log(id, url, title) 
}
func(MockMovie)
  // 5511, 
  // 'https://yts.lt/movie/deadpool-2016',
  // 'Deadpool'

HA 오류 해결

Client

movies.map(movie => (
        <MovieRankListEntry key={movie.id} movie={movie} handleClick={handleCardClick}/>
        ))

중괄호를 쓰면 오류가 나서 소괄호로 묶었다.
아무래도 return과 관련된 오류인 것 같다.
중괄호를 쓸 경우 tag 앞에 return을 쓰면 오류가 나지 않는다.

Server

특정 id, name 등을 받아오는 방법

app.get('/movies/:id', (req, res) => {
console.log(req.params) // {id: ????}
  console.log(typeof req.params.id) // string이다
  for(let i = 0; i < movies.length; i++) {
    if((movies[i].id).toString() === req.params.id) {
      res.status(200).send(movies[i])
    } 
  }
  res.status(404).end()
})

만약 http://localhost:3000/movies/8462 이렇게 특정한 id로 요청이 들어오면
'/:id'로 get한 다음
req객체에 params 프로퍼티가 존재하는데
그 프로퍼티의 id라는 속성에 접근 해 요청을 보낼 수 있다.

console.log(req.params.id) // 8462

app.get('/movies/:id/:name', (req, res) => {}) // 이런식으로 작성하면
console.log(req.params) // {id: ????, name: ???} 이렇게 찍힌다.
// 즉, req.params에 속성에 추가가 된다!