on
[React] #7 PRACTICE MOVIE APP
[React] #7 PRACTICE MOVIE APP
#7.0 To Do List part One
강의목표
to do list
state array에 element 추가하는 방법(...array)
state array에 element 추가하는 방법(...array)
위의 사진과 같은 방법으로 구현
function App() { const [toDo, setToDo] = useState(0); const [toDos, setToDos] = useState([]); //const latestToDos = useRef(toDos); const onChange = (event) => setToDo(event.target.value); const onSubmit = (event) => { event.preventDefault(); if (toDo === "") { return; } //latestToDos.current.push(toDo); setToDos((currentArray) => [toDo, ...currentArray]); setToDo(""); console.log(toDos); }; return ( My To Dos ({toDos.length}) Add To Do ); } export default App;
결과 =>
이 text에 1, 2, 3, 4를 차례로 넣어줬는데 console에는
하나씩 밀려나오는 문제가 생겼다.
해결
컴포넌트가 렌더링 될때 이전값을 기준으로 판단하기 때문인거 같다고 한다. 이것과 관련해서 찾아보는데 클로저랑 리액트 훅 뭐라고 하는데,, 이건 찾아봐도 잘 이해가 안가서 공부하려고 안그래도 개념서 책 사려했는데 겸사겸사 샀다. https://simsimjae.tistory.com/401?category=384814
그래서 여기서 useRef라는 메소드를 찾았는데, 함수형 컴포넌트 내부에서 useRef를 마치 지역변수처럼 사용할 수 있다고 한다.
보면 이런 방법으로 해결이 가능하긴하지만 state와 props에 맞춰 ui 를 보여주는 리액트의 패러다임을 벗어난다는 느낌이 있어 깨끗한 느낌은 아니라고 한다.
function App() { const [toDo, setToDo] = useState(0); const [toDos, setToDos] = useState([]); const latestToDos = useRef(toDos); const onChange = (event) => setToDo(event.target.value); const onSubmit = (event) => { event.preventDefault(); if (toDo === "") { return; } latestToDos.current.push(toDo); setToDos(latestToDos.current); setToDo(""); console.log(toDos); }; return ( My To Dos ({toDos.length}) Add To Do ); } export default App;
#7.1 To Do List part Two
강의목표
to do list 완성
map
map
array에 있는 모든 item을 내가 원하는 item으로 바꿔주고 새로운 array로 return
첫번쨰 arg에 현재의 item을 가져올 수 있다
//App return ( My To Dos ({toDos.length}) Add To Do {toDos.map((item) => ( {item} ))} ); } export default App;
결과 =>
console =>
같은 component의 list를 렌더할때는 key라는 prop을 넣어줘야 한다고 한다 => 그냥 react가 기본적으로 list에 있는 모든 item들을 인식하기 떄문
https://crong-dev.tistory.com/47여기를 참고해
자바스크립트의 배열은 정적이지 않다.즉, 배열의 길이나 원소 등이 변할 수 있다는 의미이다. 따라서 배열의 index를 key prop으로 사용하는 것을 지양해야 한다.
위의 참고한 블로그 말과 다르게 여기서는 item으로하면 같은 todo를 작성했을때 오류가 나온다 그래서 index로 했다
#7.2 Coin Tracker
강의목표
coinpaprika API를 통해 코인정보를 받아오기
코드챌린지 input에 내가 가지고있는 달러 그 돈으로 얼마만큼의 BTC로 줘 코인을 살 수 있는지
여기부터 다음에 포스팅
from http://til-blog.tistory.com/21 by ccl(A) rewrite - 2021-12-26 01:27:36