Back to Posts

[react-study] - (1)

리액트 웹 예제 클론코딩

2024-09-08

노마드 코더님의 ReactJS로 영화 웹 서비스 만들기를 들으며 방학동안 리액트 기본문법을 배운 후 이번주는 Todo리스트, 코인 트래커를 따라 만들어보았습니다. 원래는 영화 서비스 페이지도 클론코딩해볼 계획이였으나, 개강 첫주라 시간이 부족했었습니다. 또한 전체적인 학습 계획을 조금 수정해보았습니다. README.md에 주차별로 어떤 내용을 배울지 업데이트 해봤습니다.


  1. To do 리스트를 만들며
    1. 리액트의 useState() 함수
    2. .map()함수와 ... 문법
  2. Coin Tracker를 만들며
    1. 리액트의 useEffect() 함수
    2. Javascript 삼항 연산자
    3. fetch().then() 문법

To do 리스트를 만들며

week01_01

1import { useState } from "react";
2
3function App() {
4  const [toDo, setToDo] = useState("");
5  const [toDos, setToDos] = useState([]);
6  const onChange = (event) => setToDo(event.target.value);
7  const onSubmit = (event) => {
8    event.preventDefault();
9    if (toDo === "") {
10      return;
11    }
12    setToDos((currentArray) => [toDo, ...currentArray]);
13    setToDo("");
14  };
15  return (
16    <div>
17      <h1>My To Dos ({toDos.length})</h1>
18      <form onSubmit={onSubmit}>
19        <input 
20          onChange={onChange}
21          value={toDo}
22          type="text" 
23          placeholder="Write your to do..." 
24        />
25        <button>Add To Do</button>
26      </form>
27      <hr />
28      {toDos.map((item, index) => (
29        <li key={index}>{item}</li>
30      ))};
31    </div>
32  );
33};
34
35export default App;

배운 것들

  1. 리액트의 useState()함수
  2. .map()함수와 ... 문법

1. 리액트의 useState() 함수

사용 방법

[현재 state, state 를 변경하기 위한 함수] 두개의 리턴값을 가진다.

1const [anyVar, setAnyVar] = useState();

위와 같이 사용하며, anyVar가 현재 state, setAnyVar가 이 state를 변경할 때 사용하는 함수이다. 또한 useState() 안에 파라미터로 초기값을 넣어줄 수 있으며, 그 초기값이 빈 배열도 가능하다.


왜 쓰는가

useState()법함수를 사용하는 이유는 상태 관리를 쉽게 하기 위해서이다. 기존의 JS코드의 경우 간단한 counter를 만든다고 할 때, 한번 숫자를 증가시키기 위한 과정이 복잡하며, 페이지 전체를 다시 로딩해야 할수도 있다. 하지만 리액트의 useState()함수를 사용하게 되면 값이 변하는 부분만 업데이트되므로 전체 페이지를 다시 렌더링할 필요가 없다. 이는 웹페이지의 성능을 높이고, 코드 작성 및 유지보수를 더 쉽게 해준다.


2. .map()함수와 ... 문법

.map()함수에 대하여

.map()함수는 반복되는 컴포넌트를 렌더링하기 위한 자바스크립한의 배열 내장 함수이다. 파라미터로 전달된 함수를 사용하여 배열 내 각 요소를 원하는 규칙에 따라 변환한 후 새로운 배열을 생성한다.

1{toDos.map((item, index) => (
2        <li key={index}>{item}</li>
3    ))};

위 코드에서 볼수 있듯 .map()함수 안에 화살표 함수를 사용하였다. 이때 사용한 화살표 함수는 각 배열의 item과, index를 인자로 받아서 인덱스는 key로, 아이템은 <li>태그 안에 넣어서 목록으로 만든다. To do 리스트의 할일 목록을 렌더링 할 때 사용하였다.


... 문법

1arr = [0, 1]
2arr2 = [2, 3]
3
4print(arr.append(arr2))
5>>> [0, 1, [2, 3]]
6
7print(arr.extend(arr2))
8>>> [0, 1, 2, 3]

Python의 경우 .append()함수는 배열 안에 배열을 넣어 2차원 배열을 만드는데, 한 배열에 특정 배열을 붙여서 늘리고 싶으면 .append()함수가 아닌 .extend()함수를 사용한다.

1const [toDos, setToDos] = useState([]);
2...
3setToDos((currentArray) => [toDo, ...currentArray]);

JavaScript의 경우 ...을 통해 파이썬의 .extend()함수처럼 손쉽게 배열을 늘릴 수 있다. 위 코드는 기존 currentArray에 새로운 toDO를 더한 배열을 만든 뒤 setToDos라는 state를 변경하는 함수를 호출해서 toDos 배열을 업데이트 한다.


Coin Tracker를 만들며

week01_02

1import { useEffect, useState } from "react";
2
3function App() {
4  const [loading, setLoading] = useState(true);
5  const [coins, setCoins] = useState([]);
6  useEffect(() => {
7    fetch("https://api.coinpaprika.com/v1/tickers")
8    .then((response) =>  response.json())
9    .then((json) => {
10      setCoins(json);
11      setLoading(false);
12    });
13  }, []);
14  return (
15    <div>
16      <h1>The Coins! {loading ? "" : `(${coins.length})`}</h1>
17      {loading ? <strong>Loading...</strong> : null}
18      <ul>
19        {coins.map((coin) => (
20          <li>
21            {coin.name} ({coin.symbol}): {coin.quotes.USD.price} USD
22          </li>
23        ))};
24      </ul>
25    </div>
26  );
27};
28
29export default App;

배운 것들

  1. 리액트의 useEffect()함수
  2. Javascript 삼항연산자
  3. fetch().then() 문법

1. 리액트의 useEffect() 함수

1useEffect(() => {
2    fetch("https://api.coinpaprika.com/v1/tickers")
3    .then((response) =>  response.json())
4    .then((json) => {
5      setCoins(json);
6      setLoading(false);
7    });
8  }, []);

useEffect()는 리액트에서 컴포넌트가 렌더링될 때 특정 코드를 실행하기 위해 사용하는 함수이다. 주로 데이터를 가져오거나, 타이머 설정, DOM 조작 등 부수적인 효과를 처리하는 데 사용된다. 위 코드에서는 fetch()를 통해 코인 데이터를 가져오는 과정에서 한 번만 실행되도록 설정하기 위해 빈 배열 []을 두 번째 인자로 넘겼다. 이는 컴포넌트가 처음 렌더링될 때 한 번만 실행되도록 하며, 특정 상태나 값이 변경될 때만 다시 실행하도록 설정할 수도 있다.


2. Javascript 삼항 연산자

삼항 연산자는 조건 ? 참일 때 실행될 코드 : 거짓일 때 실행될 코드 형태로, 조건에 따라 실행할 코드를 간결하게 작성할 수 있는 문법이다. 위 코드에서는 로딩 중일 때와 그렇지 않을 때를 구분해 화면에 출력할 내용을 제어한다.

1<h1>The Coins! {loading ? "" : `(${coins.length})`}</h1>

위의 코드는 로딩 중이라면 빈 문자열을 반환하고, 로딩이 끝나면 코인 개수를 보여주는 기능을 한다. 이처럼 짧고 간단단게 조건문을 구현할 때 유용하다.


3. fetch().then() 문법

fetch()는 웹 API로부터 데이터를 가져오기 위한 비동기 함수로, then()을 사용해 데이터를 성공적으로 가져온 후 처리할 코드를 작성할 수 있다. 비동기 작업의 결과가 준비되었을 때 실행되는 콜백 함수를 연결하여 데이터를 처리한다.

1fetch("https://api.coinpaprika.com/v1/tickers")
2  .then((response) =>  response.json())
3  .then((json) => {
4    setCoins(json);
5    setLoading(false);
6});

위 코드에서는 코인 정보를 제공하는 API로부터 데이터를 가져온 후 then()을 통해 JSON 형식으로 변환하고, 해당 데이터를 setCoins()를 통해 상태에 저장한 후, setLoading(false)를 호출해 로딩 상태를 해제한다. 비동기적인 데이터 처리와 상태 업데이트를 매우 간단하게 구현할 수 있는 방법이다.