[웹 FE 스터디] 리액트 토이프로젝트 | useState, useEffect, API, Router

TAB 2022 2학기 학회활동 [팀 스터디]

 TIL 포스팅입니다.

작성자 : 38기_김민서

참고강의 : 노마드코더

---

이번주차는 #7에 해당하는 강의를 수강하였다.

앞서 배운내용을 기반으로 TodoList,Cointracker, 영화 웹사이트 같이 작은 토이프로젝트들을 만들어보는 강의였다.

ToDoList 만들기

1. 뼈대 구성

<div>
    <h1> My To Do List ({toDos.length})</h1>
    <form onSubmit = {}>
      <input
      onChange = {}
      value = {}
      type = "text"
      placeholder = "Write your to do.."
      />
      <button>Add To Do</button>
    </form>
</div>

우선 h1 제목아래에 todoList를 입력할수있는 input태그를 기반으로 입력을 받고, button을 이용하여 form 태그로 onSubmit 이벤트를 발생시키려고한다.

2. 기능구현

구현해야할 기능은

1. useState를 이용하여 input태그안에 입력된 값을 받아오고

2. button이 눌릴때 위의 값을 메모리스트에 추가하기

이렇게 두가지이다.

1. 입력된 값 받아오기

const [toDo, setToDo] = useState("");
const onChange = (event) => setToDo(event.target.value);
  
//..중략..//
  <input
      onChange = {onChange}
      value = {toDo}

 

강의에서 다시금 강조했던 내용으로는 보통 다른언어로 작업할때는 변수를 재선언, 즉 값을 변경해줄때는등호를 주로 사용해주는데 리액트의 경우 useState 함수에서는 setToDo라는 변수를 수정해주는 함수도 같이 선언해준다.

따라서 해당 함수를 사용해서 변수에 접근및 수정해줘야한다

2. 메모리스트에 값 추가하기

const [toDos, setToDos] = useState([]);

const onSubmit = (event) => {
    event.preventDefault();
    if(toDo === ""){
      return;
    }
    
    setToDos((currentArray) => [toDo,...currentArray]);
    setToDo("");
  };

toDo들을 담아줄 toDos라는 새로운 리스트, 즉 변수를 선언해준다!

set함수에는 크게 직접 어떤값으로 변경해줄지 넣어주기 vs 변경하는 함수를 담아주면된다

위의 예제에서는 화살표함수로 리스트를 어떻게 바꿔줄지 넣어주었다.

 

3. 메모 보여주기

이렇게 작성한 메모는 map함수를 이용하여 보여주었다.

<ul>
      {toDos.map((item,index)=>{
        <li key={index}>{item}</li>
      })}
</ul>

---

Coin tracker 만들기

해당 토이프로젝트를 통해서는 api연결을 배워보았다

여기서도 크게 2개의 useState가 사용되었다

1. 데이터담기

2. api 로딩

 

1. 데이터 담기

fetch함수를 사용하여 해당링크에서 json 데이터를 가져왔고, 가져온 데이터를 set함수를 이용하여 coin에 바로 넣어주었다

2. api 로딩

이과정에서 useEffect를 사용했는데 api를 초기렌더링할때 최초 한번만 불러올거기때문이다!

이때 loading 변수도 값을 바꿔줘서 불러온 값을 화면에 뿌려줘야한다

const [loading, setLoading] = useState(true);
const [coins, setCoins] = useState([]);
  useEffect(()=>{
    fetch("https://api.coinpaprika.com/v1/tickers")
    .then((response) => response.json())
    .then((json) => {
      setCoins(json);
      setLoading(false);
    })
  },[]);
  return (
    <div>
      <h1>The Coins! {loading ? "" : `(${coins.length})`}</h1>
      {loading ? (
        <strong>Loading...</strong>):()}

+map 함수로 데이터 뿌려주기

coin은 json 데이터이다. 따라서 해당 json데이터에 있는 값들을 기반으로 option태그를 활용하여 화면을 구성하였다.

 

<select>
  {coins.map((coin) => (
    <option>
      {coin.name} ({coin.symbol}): ${coin.quotes.USD.price} USD
    </option>
  ))}
</select>

실행화면

 

 

---

Movie App 만들기

위의 cointracker를 조금 응용한 프로젝트이다.

해당 프로젝트에서는 주로 코드 리팩토링 작업을 위주로 설명해주셨다

1.async-await 메소드

특히 위에서는 then을 사용하여 api 관련 코드를 작성해주었는데

async-await 메소드를 사용하여 리팩토링해주었다.

const [loading, setLoading] = useState(true);
  const [movies, setMovies] = useState([]);
  const getMovies = async () => {
    const json = await (
      await fetch(
        `https://yts.mx/api/v2/list_movies.json?minimum_rating=8.8&sort_by=year`
      )
    ).json();
    setMovies(json.data.movies);
    setLoading(false);
  };
  useEffect(() => {
    getMovies();
  }, []);

2. 컴포넌트로 분리하자

화면에 가져온 데이터를 그려주는 것도 위와 비슷하게 map함수를 이용하여 배치해주었다.

 <div>
          {movies.map((movie) => (
            <div key={movie.id}>
              <img src={movie.medium_cover_image} />
              <h2>{movie.title}</h2>
              <p>{movie.summary}</p>
              <ul>
                {movie.genres.map((g) => (
                  <li key={g}>{g}</li>
                ))}
              </ul>
            </div>
          ))}
        </div>

하지만 점차 그려줄 데이터량도 많아짐에 따라 컴포넌트로 따로 분리하는게 바람직하다.

function Movie({ coverImg, title, summary, genres }) {
  return (
    <div>
      <img src={coverImg} alt={title} />
      <h2>{title}</h2>
      <p>{summary}</p>
      <ul>
        {genres.map((g) => (
          <li key={g}>{g}</li>
        ))}
      </ul>
    </div>
  );
}

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

따라서 propTypes를 지정해주고, 인자로 필요한 데이터를 받아주었다.

---

이외에도  react-router에서 제공하는 Hook들을 배웠다.

1. Router

그럼 이렇게 분리해놓은 영화 페이지로 이동하려면,

즉 한페이지에서 다른페이지로 이동하려면 어떻게 구현해야할까?

답변은 Router를 사용하면 된다!

*router를 사용하기전에는 npm install로 깔아줘야하는데 react의 경우 업데이트가 잦아서 구글에 react router 최신버전 쳐보고 install 하면된다

 

<Router>
      <Switch>
        <Route path="/movie">
                  <Movie />
        </Route>
	  </Switch>
</Router>

사용법은 간단히 위와 같다!

App 컴포넌트를 렌더링할때는 React.strictmode 태그로 감싸주고 return 해주었는데

Router는 위와같이 router, switch, route 태그로 감싸주면된다

path 속성값으로는 링크뒤에 붙을 애들을 적어주면된다.

2. Link 

근데 위의 영화 프로젝트에서 의도하는 바는 

영화 제목을 클릭하면 영화 정보를 담고있는 상세페이지로 이동하는 기능일것이다.

위의 router는 해당 링크로 들어갔을때 원하는 컴포넌트를 로드해주는것이기 때문에 컴포넌트를 링크에 배정해준다!로 이해하면 쉽다 

따라서 클릭했을때 해당링크로 이동하는, 즉 a= href 이런것처럼 사용하려면 리액트에서는 Link라는 것을 추가적으로 이용해줘야한다

사용방법은 원하는 곳에서

1. <Link> 태그로 감싸주고

2, to 속성에 어떤 링크로 이동할지(위에서 라우터로 설정해준 링크) 적어주면된다

<h2>
	<Link to="/movie">{title}</Link>
</h2>

3. useParams

위의 router와 link를 통하여 링크를 생성하고 해당하는 영화에 따른 링크로 이동할수있다.

하지만 우리는 영화 api를 가져왔기때문에 엄청 많은 데이터를 뿌려주고, 링크를 생성해줘야한다.

해당 훅을 사용하지않으면 우리가 위에서 가져온 영화 key를 넣어줘야하는데

useParams를 이용하면 훨씬 간단하게 사용할수있다.

https://babycoder05.tistory.com/entry/useParams-%EB%A1%9C-%EC%84%B8%EB%B6%80-%ED%8E%98%EC%9D%B4%EC%A7%80-%EB%9D%BC%EC%9A%B0%ED%8C%85-%EA%B5%AC%ED%98%84%ED%95%98%EA%B8%B0?category=1023016#:~:text=useParams%20%EB%9E%80%3F,%EC%82%AC%EC%9A%A9%ED%95%A0%20%EC%88%98%20%EC%9E%88%EB%8F%84%EB%A1%9D%20%EB%8F%84%EC%99%80%EC%A4%80%EB%8B%A4. 

useParams 로 세부 페이지 라우팅 구현하기

해당 블로그에 자세히 나와있다ㅎㅎ

---

빌드

이렇게 만든 프로젝트를 빌드하는 방법도 배워봤다.

gh-pages 패키지 깔기

npm i gh-pages

 

package.json

1. 호스팅 링크 적어주기

호스팅할 깃허브 page 링크를 "homepage" : "해당링크" 형식으로 맨밑에 달아주면 된다.

2. scripts 괄호에 안에 deploy 속성 달아주기

"deploy" : "gh-pages -d build"
"predeploy" : "npm run build"

이렇게 설정을 해주고 npm run build 명령어를 치면 자동으로 해당 웹사이트에 등록이된다

*바로 올라가진 않으므로 404 에러가 떠도 정상이다! 

한 5-10분정도 기다려야되는듯