이 포스트에서 다룰 것 리액트 앱을 개발하면서 특정 컴포넌트의 렌더링 직전에 특정 작업을 해야 한다던지, 업데이트 된 후에 처리해야 한다던지 하는 일이 있을 것이다. 이런 상황에서 유용하게 쓰일 수 있는 훅의 개념과 사용법과 의존성 배열에 대해서 알아본다. 컴포넌

리액트에서 함수형 컴포넌트를 사용한다면 훅(Hook)이라는 기능을 필수적으로 사용하게 된다. 지난 포스팅에서도 다루었지만, 예제와 함께 더 자세하게 기본 중의 기본 훅인 useState를 알아볼 것이다. 자바스크립트 ES6의 Destructuring Assignment

이 포스트에서 다룰 것 컴포넌트를 최적화하기 위해 사용하는 대표적인 훅 , 중에서, 를 알아볼 것이다. 를 사용하는 방법과, 사용하면 무엇이 좋은지를 알아본다. 배경 지식 Memoization(메모이제이션) 라는 이름에서 알 수 있듯이 는 말 그대로 메모를 하는 방

이전 포스트에서 만든 validate 코드의 리팩토링을 진행할 것이다. 이 프로젝트에서 validate는 새로운 학생, 강사, 그룹이 추가될 때마다 각각의 입력값이 유효한지 검사해주는 컴포넌트였다. 학생, 강사, 그룹의 Container가 모두 validate를 가지고

외주 개발을 하면서, input값이 비어 있거나 원하는(유효한) 형식이 아닐 경우 에러메시지를 띄우고, 저장을 못하게 막는 기능을 구현했다. react-use-form 과 같은 라이브러리를 사용하기엔 이미 작성된 코드에 끼워넣기가 굉장히 복잡했고, 프로젝트가 무거워지는

리액트에서는 중요한 데이터를 state에 담아서 보관하고 변경한다.useState()는 state를 하나 만들어주는 함수이다. 이용하기 위해선 import해줘야 한다.useState()안의 인자로 state를 초기화할 수 있다. useState(저장할 데이터) 이렇게