corin

리액트에서 api를 다루면서 2가지를 많이 사용한다. 1. suspense 2. errorBoundary 간단하게 promise에 대해 이야기를 하자면 1. api 등을 사용하기 위해 fetch를 사용한다. 2. fetch의 결과는 프로미스로 전달된다. 3. 결과는 3가지 상태가 있는데, 1) 팬딩-진행중- 2) 실패 3) 성공이 있다. 이는 더 찾아보면 좋다. 4. 이 상태를 관리하기 위해 위 두 가지를 사용한다. 1) 서스펜스 - 팬딩상태라면 스켈레톤을 그려준다. 2) 에러 바운더리 - 에러바운더리로 감싼 컴포넌트 안에서 에러가 발생하면 이를 캐치해서 대체 컴포넌트를 그려준다. > 나는 api를 사용한 컴포넌트 밖에 놓고, api가 실패한 경우 그 자리에서 throw new Error를 던져서 사용했..

배경지식 01. 점심 뭐먹지와 동일한 ui이다. 02. 레스토랑을 추가하고 삭제하는 기능은 구현하지 않으며 클릭했을 때 모달창이 켜지는 것만 실행된다. 03. 기존에 바닐라로 구현한 것을 리액트로 구현한다. 04. 리액트를 접해보지 않은 사람들을 위해 익숙한 이전 미션을 다시 해보며, 기능도 줄어들었다. 05. 리액트 온보딩 같은 느낌이라서 짧은 미션기간이었다. 1단계가 화-목/ 2단계가 금-월었다. 06. 1단계는 class형으로 컴포넌트를 작성했다. 2단계는 이를 function형으로 수정했다. 이번에 처음 리액트를 만졌기 때문에 걱정이 많았는데 페어가 리액트를 잘 다루고 파일분리를 잘하는 크루라서 도움을 많이 받았다. 사실 거의 배우는 시간이었다고 할 수 있을 정도로 따라가는 시간이 많았는데, 아예..

svg를 컴포넌트로 만들어서 화면에 그려내야 했다. 이런식으로 svg를 불러와서 로고를 그려내고 싶었다. 위 코드대로라면 첫번째 줄에 하나로고/우리로고 두번째 줄에 롯데로고/롯데로고가 나와야했다. 하지만 역시나 잘 되지 않는다.. (리액트를 시작하고 되는일이 하나도 없어) 따란..! 이렇게 하나은행이 4개가 나왔다. 이게 순서를 바꿔도 하나은행이 나오냐? 아니다. 무조건 첫번째 있는 놈에 따라 뒤에 것들이 모두 바뀌어버렸다.. 결과적으로는 무엇이 문제냐 이건 하나은행 로고 svg이다. 이건 우리은행 로고 svg이다. 두 코드에서 중요하게 봐야하는 것은 pattern의 id이다. 두 id가 같다. 이 아이디가 같으면 같은 이미지를 보여준다-다른 크루의 도움을 받았다-고 한다. 그래서 얼른 바꾸어보았다. 단..

처음 리액트 렌더링에 대해 생각하게 된 계기는 다음과 같았다. const [val, setVal] = useStats(0) function foo(){ setVal(val+1) ; setVal(val+1) ; setVal(val+1) ; } 맥락이 위와 같은 코드를 짜고 대단히 오류가 났다. 답은 무엇일까? 왜 위에 코드가 문제가 생길까? 이것과 관련한 답은 "틀리면서 공부하는.."코너에 나와있으니 여기에서 확인하기 바란다. 여튼간 "state가 바뀌면 새로 랜더링 된다고 한다"라는 사실만을 믿고 코드를 짜는 것은 이러한 오류를 낼 수 있다는 생각에 리액트가 언제 다시 랜더링되는 지를 조금 알아보게 되었다. .jsx는 어떻게 렌더링될까? 리액트는 업데이트가 된 부분만 다시 그리기를 하게 된다. 이는 단순..

리액트를 잘 모르면 발생하는 문제가 여럿있다. 그중 한 가지를 가지고 왔다. const [count, setCount] = useState(0); function plus() { setCount(count+1); setCount(count+1); setCount(count+1); } plus(); 이 상황에서 count는 몇일까? 3? 정답은 1이다. 그 이유는 저 plus가 실행되는 당시 안 count는 0이다. setCount 속 count는 0이니 결국 그 안에는 주구장창 1만 들어가게 된다. 그럼 나는 한 함수 안에서 setCount를 어러번 하고 싶은데 어떻게 해야하지? const [count, setCount] = useState(0); function plus() { setCount((cou..