# 공부 자료들/React 검색 결과
11 개의 검색 결과가 있습니다.
# 공부 자료들/React

[React] side-effect를 처리할 때는 useEffect를 쓰자

한창 진행중인 Vue 기반 프로젝트를 마무리하고, 방학기간이라 여유가 생겨서 정말 오랜만에 React 기반의 SsocoTimer를 열어보니 머리가 지끈지끈해졌습니다. 리액트 진짜 너무 어렵네요 ㅋㅋㅋㅠ issue에 쌓여있는 내용들을 하나씩 쳐내기 위해서 코드를 변경하고 있는데, useState가 원하는대로 동작하지 않는 현상이 발생했습니다. 사실 이전에 useState와 useEffect의 동작방식에 대해 하나씩 확인해보면서 "이건 이벤트 핸들러(이벤트 처리 함수)가 아닌 useEffect로 처리하면 된다"는 것을 경험적으로 깨달았기 때문에 문제 수정 자체는 크게 어렵지 않았지만, 리액트의 라이프사이클에 대해서 조금 더 정리하고 넘어가야 할 필요성을 느끼기도 했고, 비슷한 고민을 다시 하고 있는 나를 보..

2022. 6. 4. 23:43
# 공부 자료들/React

[React] 알고 쓰면 피가 되고 살이 되는 React.memo, 그리고 Key와의 관계?

3월 이맘때쯤, 반복되는 요소들을 출력할 때 React.memo를 사용하면 보다 효율적으로 렌더링할 수 있다는 이야기를 듣고 여러 가지로 테스트를 해본 적이 있습니다. 단순히 React.memo를 사용하는 것 자체를 이해하는 것은 크게 어렵지 않았습니다. 하지만 Key값이 들어가니 갑자기 헷갈리기 시작했습니다. 같은 위치가 아니라서 밀려 내려가면, 새롭게 렌더링 되는게 아닌가? 라는 생각이 들었습니다. (결론부터 말하자면 React.memo와 Key는 쓰임새가 조금 다릅니다!) 그래서 직접 테스트를 하면서 익힌 내용을 간단하게 글로 정리해보려고 합니다. (많은 자료들을 통해 최대한 검증하려고 노력하였으나, 그럼에도 틀린 부분이 있다면 언제든지 가차없이 댓글을 남겨주시면 빠르게 수정하도록 하겠습니다!!) ..

2022. 4. 23. 21:03
# 공부 자료들/React

[React] craco로 CRA 5 + TypeScript 환경에서 babel 설정 만지기

한창 쏘코타이머를 열심히 개발하던 중, 하나의 피드백이 들어왔습니다. 이 Pragma라는 녀석이 매 tsx마다 포함되어있는데, 이걸 babel로 없애버리면 어떠겠냐는 의견이었습니다. 물론 그러면 더 좋죠. 귀찮음도 줄어들고 그만큼 확장성도 늘어날테니까요. 하지만.. 이걸 고민하지 않은 것이 아니었지만... 의식적으로 피하고 있었습니다. 왜냐면 저는 CRA환경에서 개발을 하고 있었기 때문에 babel 설정을 건들기 위해서는 eject를 해야만 했죠. eject를 하게 된다면 CRA를 쓰는 의미가 없어진다고 생각한 저는 다른 방법을 찾기 시작합니다. 그것이 바로 craco였죠. 목차 0. emotion emotion는 CSS-in-JS의 대표적인 라이브러리로, JavaScript 안에서 스타일을 작성할 수 ..

2022. 3. 23. 05:00
# 공부 자료들/React

[React] Menifest.json이 뭘까?

CRA를 이용해서 프로젝트를 생성하고 한참이 지났습니다. 그동안 거의 확인하지 않았던 public 폴더를 오랜만에 확인했더니 manifest.json이라는 파일이 있더라구요? 도대체 이게 무슨 파일일까 싶어서 알아보았습니다! 목차 0. menifest.json 톺아보기 먼저 menifest.json 파일은 웹 애플리케이션의 정보를 JSON 텍스트파일로 제공해서 웹 앱의 다운로드를 네이티브 앱과 유사한 형태로 제공할 수 있게 도와주는 파일을 말합니다. menifest.json파일 내에는 이름, 저작자, 아이콘, 버전 등이 들어가게 되죠. 그렇다면 CRA가 자동으로 만들어준 menifest.json을 직접 확인해보겠습니다. 위에서부터 차근차근 살펴보겠습니다. name은 icon에 표시될 이름을 말합니다. 보..

2022. 3. 4. 16:55
# 공부 자료들/React

[React] useCallback이 뭔데 자꾸 하라고 시키는거야?

useEffect를 깨닫고 드디어 나도 Hooks의 즐거움을 느낄 수 있게 되었구나라고 생각하던 찰나, VScode는 저에게 또 다른 과제를 주었습니다. 바로 useCallback을 함수에 씌우라는 명령이었죠. 목차 0. useCallback이 뭘까? useCallback을 이해하기 위해서는 먼저 memoization과 useMemo에 대해서 알아야 합니다. 하지만 이번 포스팅의 주된 요소는 useCallback이기 때문에 간단하게만 설명하고 넘어가겠습니다. Memoization은 기존에 수행한 연산의 결과값을 어딘가에 저장해두고 동일한 입력이 들어오면 재사용하는 프로그래밍 기법입니다. 중복 연산을 피해서 성능을 최적화할 수 있는 좋은 방법이죠. useMemo는 같은 인자가 들어오는 경우 함수를 다시 호..

2022. 2. 2. 07:33
# 공부 자료들/React

[React] 몸소 느껴버린 useEffect의 필요성

타이머를 만들면서 정말 많은 내용을 배우고 있습니다. useState를 왜 써야 하는지, useRef는 무엇인지, useEffect는 언제 사용하는 지에 대해서 정말 하나도 몰랐구나라는 생각이 들었습니다. 도대체 나는 이것들을 프로젝트때 어떻게 썼을까.. 이번 포스팅은 단순히 useState로 관리했던 내용들을 useEffect를 통해 렌더링 이후에 관리하는 방식으로 보다 편리하고 눈에 보이도록 상태관리를 할 수 있다는 것을 경험한 내용을 담은 포스팅이 되겠습니다! 목차 0. useEffect란? useEffect는 각종 Side Effect를 처리하기 위해서 만들어진 Hook입니다. 과거 class 생명주기에서는 componentDidMount, componentDidUpdate, componentWi..

2022. 2. 2. 06:00