React 흐름

[kim-kiwon]

React 흐름

• App.js 에 Router 로 path 별 컴포넌트를 매핑한다.
• 최대한 기능 단위로 컴포넌트를 쪼갠다
  • 상위 컴포넌트 -> 하위 컴포넌트로 데이터를 넘겨줘야한다면 Props 를 사용한다.
  • Props 의 타입검증은 PropTypes 를 활용한다.
• 각 컴포넌트에서 페이징 렌더링 로직을 구성한다.
  • 특정 변수가 변경될 경우 리렌더링 해야한다면 useState 를 사용.
  • API 호출 등 한번만 호출되어야 하는 로직은 useEffect 활용

[kim-kiwon]

배운 점

useState

• useState 는 특정 변수가 변할 경우 해당 컴포넌트를 리렌더링 해야할 때 사용된다
• setter 는 직접 사용하거나 함수를 정의할 수 있다.

• 사용 예시

  • todo 를 입력할 때 마다 페이지가 리렌더링 된다.

    function App() {
    const [toDo, setToDo] = useState("")
    const onChange = (event) => setToDo(event.target.value)
    
    return (
    <div>
      <input
        onChange={onChange}
        value={toDo}
        type="text"
        placeholder="Write your todo"
      />
    </div>
    )
    }

useEffect

• useEffect 는 컴포넌트가 최초 렌더링 / 특정 값 변경 / 컴포넌트 소멸시 호출되는 훅이다.
• 최초 렌더링시 API 를 호출하는데 주로 사용된다.
• 함수 내부 로직
  • 컴포넌트 최초 렌더링 시 호출
• 함수 반환 로직
  • 컴포넌트 소멸시 호출
• 배열 파라미터
  • 해당 값 변경시 함수 내부 로직이 호출
• 사용 예시

  function Hello() {
    useEffect(() => {
      console.log("hi :)");
      return () => console.log("bye :(");
    }, [])
    return <h1>Hello</h1>;
  }

컴포넌트

• 기능이 많아지면 하나의 페이지에 너무 많은 로직이 위치한다.
• 이를 방지하기 위해 페이지에 기능 단위로 쪼갤 수 있는데 그 단위가 컴포넌트이다.
• 상위 베이스 페이지에서 컴포넌트를 호출하며. 이때 Props 로 하위 컴포넌트가 그리는데 필요한 정보를 넘겨 줄 수 있다.

• 사용 예시

  • 부모인 Home.js 에서 API 를 호출하고, Movie 에게 API 결과를 Props 로 넘겨주며 호출한다.

  • 자식인 Movie.js 는 PropTypes 로 Props 의 타입을 검증한 후 Props 를 활용해 렌더링 한다

    // 부모인 Home 컴포넌트
    function Home() {
    const [movies, setMovies] = useState([])
    const getMovies = async () => {
    const response = await fetch(
      `https://yts.mx/api/v2/list_movies.json?minimum_rating=9&sort_by=year`
    )
    const json = await response.json()
    setMovies(json.data.movies)
    setLoading(false)
    }
    useEffect(() => {
    getMovies()
    }, [])
    
    return <div>
    </h1>
        <div>
        {movies.map(movie =>
          <Movie
            key={movie.id} // map 등 순회시 key 값은 필수
            id={movie.id} // 동적 페이지 렌더링을 위해 넘겨주는 id
            coverImg={movie.medium_cover_image}
            title={movie.title}
            summary={movie.summary}
            genres={movie.genres}/>
        )}
      </div>
    }
    </div>
    }

    
    // 자식인 Movie 컴포넌트
    function Movie({ id, coverImg, title, summary, genres }) {
    return (
    <div>
      <img src={coverImg} alt={title} />
      <h2>
        <Link to={`/movie/${id}`}>{title}</Link>
      </h2>
      <p>{summary}</p>
      <ul>
        <li>
          {genres.map(g =>
            <li key={g}>{g}</li>
          )}
        </li>
      </ul>
    </div>
    )
    }

  Movie.propTypes = { id: PropTypes.number.isRequired, coverImg: PropTypes.string.isRequired, title: PropTypes.string.isRequired, summary: PropTypes.string.isRequired, genres: PropTypes.arrayOf(PropTypes.string).isRequired }

React Router

• React Router 는 리액트에서 path 에 따라 다른 컴포넌트를 렌더링하도록 지원하는 라이브러리이다.
• App.js 는 주로 이런 라우터의 역할을 하게된다.
• 사용 예시

  // App.js
  function App() {
  return (
    <Router>
      <Routes>
        <Route path='/' element={<Home />} />
        <Route path='/movie/:id' element={<Detail />} />
      </Routes>
    </Router>
  )
  }