[w/퍼실리테이터 이대희 강의] React 예제 살펴보기

react 예시 확인하기

React

 

• video가 props가 된다.
• 반환할 때를 보면 html과 똑같이 태그들을 사용할 수 있다. 
  사용법이 조금씩은 {}으로 넣는 등 다르다.

 

• MyButton에 props를 'name'으로 받아와서 'a.button'을 기본값으로 받아올 수 있다.

---

실습하기1 : count 사용

 

빈 태그일 경우

https://react.dev/reference/react/Fragment

<Fragment> (<>...</>) – React

 

전체 코드

import { useRef, useState } from 'react';
import './App.css';

function Counter({ n = 2 }) {

  const [count, setCount] = useState(0);

  function decrement() {
    setCount((current) => {
      if(current <= 0) {
        return 0;
      }

      return current - 1;
    });
  }

  function increment() {
    setCount((current) => current + 1);
  }

  return (
    <>
      <h1>normal: {count}</h1>
      <h1>{n} 배수: {count * n}</h1>
      <button onClick={decrement}>-</button>
      <button onClick={increment}>+</button>
    </>
  );
}

export default App

 

그 외

• counter태그를 줘서 코드 쉽게 관리하기
• n배수를 input을 선언해서 value를 줘서 useState를 사용해서 관리하기

 

---

실습하기2 : todo-list 만들기

 

• list이다보니 배열로 관리하기

 

* 리스트에는 key가 있어야함. 이유는?
아이템이 50번째가 40번째로 바뀌거나 이런식으로 순서가 바뀔 때, 사용한다고 보면 된다.
이럴 때, 인덱스 배열이 바뀔 수도 있기 때문에 key를 안주면 필요없는 렌더링이 발생하거나 원하는 기능을 작동 안 할 수도 있다.

• key는 중복되지 않는 고유값이 들어감.

 

• 아이템 추가할 때 input 태그를 작성하기
• useState를 사용해, 입력 값 관리하기

 

 

• setValue에 해당 값 넣기
• setList는 이전 값을 넣을거다. 
• id에 현재 시간을 문자열로 넣으면 유니크한 값으로 대체 가능할 것이다.
• 초기화 시킬 때는 'setValue('')' 추가하기.

 

• callback 추가하기. -> '...current' 적용해서 상태를 업데이트 하기

 

값을 수정할 때 '렌더링'되는 것은 좋지 않음. 
그래서 useState으로 관리하는 것 보다, ref를 사용해서 관리하는 것이 좋다.

수정할 때 '렌더링'이 발생하지 않게 됨.
큰 사이트에서는 '렌더링' 관리 미흡에 의해, 큰 영향을 줄 수 있게 됨.

 

전체 코드

import { useRef, useState } from 'react';
import './App.css';

function App() {
  const [list, setList] = useState([
    {id: 'temp-value', text: '밥 먹기'},
  ]);
  const ref = useRef();

  const addList = () => {
    const id = new Date().toISOString();
    const text = ref.current.value;

    setList((current) => {
      ref.current.value = '';
      return [...current, { id, text }];
    });
  }

  return (
    <>
      <h1>Todo</h1>
      <input ref={ref} />
      <button onClick={addList}>추가</button>
      {list.map((item) => {
        return <p key={item.id} style={{backgroundColor:'lightblue', minWidth:'100px', minHeight:'100px'}}>{item.text}</p>;
      })}
    </>
  );
}

export default App