분류 전체보기218 2022년의 절반을 돌아보며 며칠 비가 내리더니 이제는 푹푹 찌는 여름 날씨가 시작되었다. 어느 때보다 바쁘고 격정적인 한 해를 보내고 있는데 정작 앞에 놓인 일들을 온 힘을 다해 쳐내기만 할 뿐 제대로 돌아보고 쉰 적이 없었다. 이렇게 소중한 시간은 다시 오지 않을텐데... 이렇게 아무것도 남기지 않고 흘려보낼수는 없지 않을까? 지금이라도 열심히 회고 글을 써보기로 했다. 무엇을 하고 있었지? 작년 가을이 끝나갈 무렵, 우아한테크코스 4기 모집 공고를 보고 곧바로 지원하게 되었다. 우테코야 전부터 여기저기서 워낙 많이 언급되었던 곳이라 꼭 해보고 싶었는데 마침 잘 됐다 싶었다. 대입도 정시였고, 딱히 어딘가에 지원한 경험이 없어서 자소서라는걸 써 본 경험이 전무했던 내가 흐릿했던 기억들을 되살리며 인생 처음으로 제대로 된 자소서를.. 2022. 6. 27. 리액트의 에러 경계 (React Error Boundaries) 이전 글에서 클래스의 생명주기 단계 중, 리액트의 훅이 지원하지 않는 메서드가 일부 있다고 하였습니다. 그 중 하나가 이번 글의 주제인 에러 경계(Error boundaries) 를 형성하는 componentDidCatch 단계입니다. 오늘은 에러 경계란 무엇이고, 어떻게 등장하게 되었으며 사용하는 방법은 무엇인지 알아보겠습니다. 에러 경계 에러 경계란 컴포넌트의 하위 단계에서 발생하는 에러를 잡아내어 비정상적인 화면 대신 우리가 지정한 폴백 UI를 보여주는 리액트 컴포넌트의 한 종류입니다. 리액트 프로젝트를 개발해보신적이 있다면, 한 번쯤 런타임에서 에러가 발생했을때 실행중인 화면에 에러 내용이 오버레이 되어 표시되는 것을 보신적 있을겁니다. 이 화면은 create-react-app에 포함된 패키지 중.. 2022. 6. 5. 리액트의 추가 훅 (React Additional Hooks) 이전 포스팅인 리액트의 기본 훅에서 이어집니다. 리액트의 추가 훅 지난번에 소개한 리액트의 기본 훅 세 가지에 더해, 리액트에서는 총 일곱 가지의 추가 훅을 제공합니다. 추가 훅은 기본 훅들에 약간의 변경을 더하거나, 특별한 경우에 사용할 수 있도록 설계되었습니다. 하나씩 알아보겠습니다. useReducer import { useReducer } from 'react'; const [state, dispatch] = useReducer(reducer, initialArg, init); useReducer는 useState를 대체하는 훅입니다. useState가 단순히 상태를 선언하고, setState 함수를 반환해 준 것에 더해서 useReducer는 다양하고 복잡한 로직들을 dispatch를 통해 처리.. 2022. 5. 17. 리액트의 기본 훅 (React Basic Hooks) 훅의 등장 리액트가 함수형 컴포넌트를 지원하기 시작하며 사람들은 기존의 길고 복잡한 클래스 컴포넌트에서 벗어나 간단한 함수로도 컴포넌트를 만들 수 있었습니다. 하지만, 함수에는 고질적인 문제점이 있었습니다. 바로 함수는 자신의 상태를 가질 수 없다는 것입니다. 함수가 상태를 가질 수 없다보니, 클래스 컴포넌트가 할 수 있던 다양한 작업들을 수행하기가 어려웠습니다. 이 문제를 해결하기 위해 등장한 기술이 바로 훅(Hook)입니다. 훅은 컴포넌트에서 상태를 다루는 작업들을 추상화시킨 로직들의 집합입니다. 클래스 컴포넌트에서 사용하던 생명 주기 메서드와 같은 대부분의 상태 관련 기능들을 함수형 컴포넌트에서도 훅을 통해 사용할 수 있습니다. 리액트 훅 이 글이 작성된 시점은 React 18.0.0 버젼을 기준으.. 2022. 5. 13. 클래스 컴포넌트와 함수 컴포넌트 (Class Component / Functional Component) 리액트 컴포넌트 리액트의 컴포넌트는 크게 두 종류로 나눌 수 있는데, 클래스로 이루어진 클래스 컴포넌트와 함수로 이루어진 함수 컴포넌트가 있습니다. 둘 중 어떤 방법으로 컴포넌트를 생성하더라도 우리의 리액트 프로젝트는 정상적으로 작동 할 것입니다. 그런데 왜 리액트는 두 가지 방식의 컴포넌트를 모두 사용할까요? 등장 배경 사실 함수 컴포넌트는 처음 리액트가 나올때는 존재하지 않았던 기술입니다. 이전까지의 리액트 컴포넌트들은 클래스 컴포넌트로만 구성할 수 있었고, 함수형으로 작성하는 컴포넌트는 몇 번의 업데이트 이후에야 등장하였으며 안정적으로 사용되기까지 약간의 시간이 더 필요했습니다. 물론 함수 컴포넌트는 클래스 컴포넌트에 비해 훨씬 적은 양의 코드로도 외적으로 동일한 기능을 수행할 수 있었고, 기존의 .. 2022. 5. 3. 리액트 컴포넌트 생명주기 (React Component Life Cycle) 리액트를 공부하며 이번에 리액트를 본격적으로 사용하게 되었습니다. 그동안 리액트 자체를 사용해보긴 했지만 어떻게 사용해야하는지에 대한 고민이나 공부없이 말 그대로 쓰기만 했었습니다. 그래서, 이번 기회에 기초부터 차근차근 공부해보려 합니다. 오늘은 리액트 컴포넌트의 생명주기에 대해 알아보겠습니다. 글을 쓰는 현재 리액트 18버젼이 나왔기 때문에, 17버젼에서 이미 deprecate된 일부 단계들은 다루지 않습니다. 1. componentDidMount 컴포넌트가 마운트(mount)되며 일어나는 단계입니다. 위키백과에서는 마운트(mount)에 대해 "컴퓨터 과학에서 저장 장치에 접근할 수 있는 경로를 디렉터리 구조에 편입시키는 작업을 말한다." 라고 설명합니다. 이처럼 컴포넌트가 처음 실행되면 컴포넌트의 .. 2022. 5. 1. 이전 1 ··· 12 13 14 15 16 17 18 ··· 37 다음
