[패스트 캠퍼스 FE] 리액트 맛보기 - 5

조규준·2022년 5월 17일
0

[패스트 캠퍼스 FE]

목록 보기
18/20
post-thumbnail

리액트 맛보기 - 5


목차

1️⃣ Key와 리랜더링 알아보기

2️⃣ 상태 끌어올리기

3️⃣ 데이터 Fetch 해보기






1️⃣ Key와 리랜더링 알아보기


Key는 Value를 특정하는 이름


예제) todo list 만들기

완료 버튼 클릭시 해당 항목이 사라지고, 복구 버튼을 누르면 사라진 항목이 표시됨.

import React from 'react';

const todos = [
  {id: 1, value: "일어나서 이불개기"},
  {id: 2, value: "10분 명상하기"},
  {id: 3, value: "노션으로 일정짜기"},
  {id: 4, value: "확언으로 되새기기"},
]

function App() {
  const [items,setItems] = React.useState(todos);

  function handleDoneClick(todo){
    setItems(items => items.filter((item)=> item!==todo));
  }
// item값들 중에서 클릭된 해당 value값을 가진 item을 제외한 나머지를 리턴함.

  function handleRestoreClick(){
    setItems((items)=>[
      ...items,
      todos.find(item => !items.includes(item))])
  }
// todos와 비교해서 없는 item을 리턴함.

  return <>
  {items.map((todo)=>(
    <div key={todo.id}>
    {/* 이부분이 없으면 에러남 */}
      <span>{todo.value}</span>
      <button onClick={()=>handleDoneClick(todo)}>완료</button>
    </div>
  ))}
  <button onClick={()=> handleRestoreClick()}>복구</button>
  </>;
}

export default App;

최종 정리






2️⃣ 상태 끌어올리기



예제

코드

import React from 'react';

const Id =({handleIdChange}) => {  
  return( <>
    <label>ID : </label> 
    <input onChange={handleIdChange} type="text"></input>
    </>
  )}

const Password =({handlePasswordChange}) => {  
  return( <>
    <label>PW : </label> 
    <input onChange={handlePasswordChange} type="password"> </input>
    </>
  )}

function App() {
  const [id, setId] = React.useState("");
  const [password, setPassword] = React.useState("");
  // 이런식으로 형제 컴포넌트의 상태를 부모로 lifting Up 해서 알아옴.

  const handleIdChange = (e) => {
    setId(e.target.value);
  }
  // 입력된 값으로 Id 변경

  const handlePasswordChange = (event) => {
    setPassword(event.target.value);
  }

  const handleLoginClick = () =>{
    alert(`id: ${id}, pw: ${password}`);
  };
  // 버튼 클릭시 id와 password 띄움

  return (
   <>
   <Id handleIdChange={handleIdChange}/>
   <br/>
   <Password handlePasswordChange={handlePasswordChange}/>
   <button disabled={id.length === 0 || password.length===0}onClick=				{handleLoginClick}>Login</button>
   </>
  );
}

export default App;

최종 정리






3️⃣ 데이터 Fetch 해보기


공식 문서

예제

여기에서 json을 불러와 왼쪽처럼 출력하고,
에러가 날 경우 오른쪽 처럼 출력하기.

코드

import React from 'react';

function App() {
  const [data,setData] = React.useState(null);
  const [error, setError] = React.useState(null)

  React.useEffect(()=>{
    fetch("https://raw.githubusercontent.com/techoi/raw-data-api/main/simple-api.json")
    .then(function(response){
      return response.json();
    })
    .then(function(myJson){
      setData(myJson.data);
    })
    .catch((error) => {
      setError(error.message);
    });
  },[]);

  if(data==null){
    return <p>Loading ... </p>
  }
  // data가 없을 경우 Loading을 띄움

  if(error != null){
    return <p>{error}</p>
  }
  // 에러가 났을 경우 어떤 에러인지 메시지 출력

  return (
    <div>
      <p>People</p>
      {data.people.map((person) => (
        <div key={person.name}>
          <span>name: {person.name} </span>
          <span>age: {person.age} </span>
        </div>
      ))}
    </div>
  );
}

export default App;

최종정리

Fetch api ➡️ 네트워크 통신 도구
상황별 핸들링 ➡️ 로딩 / 데이터 / 에러

profile
사주보는 프론트엔드 개발자

0개의 댓글