목차
1️⃣ Key와 리랜더링 알아보기
2️⃣ 상태 끌어올리기
3️⃣ 데이터 Fetch 해보기
Key는 Value를 특정하는 이름
완료 버튼 클릭시 해당 항목이 사라지고, 복구 버튼을 누르면 사라진 항목이 표시됨.
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;
코드
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;
여기에서 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 ➡️ 네트워크 통신 도구
상황별 핸들링 ➡️ 로딩 / 데이터 / 에러