profile
프론트엔드를 공부하고 있습니다.
post-thumbnail

리액트 useEffect

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

2022년 4월 22일
·
0개의 댓글
·
post-thumbnail

리액트 useState

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

2022년 4월 17일
·
0개의 댓글
·
post-thumbnail

리액트 useMemo

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

2022년 4월 14일
·
5개의 댓글
·
post-thumbnail

리액트 코드의 재사용성을 높이는 리팩토링

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

2021년 11월 23일
·
0개의 댓글
·
post-thumbnail

리액트 input값 validate하기

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

2021년 11월 16일
·
1개의 댓글
·
post-thumbnail

내가 헷갈려서 정리하는 React state 사용법

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

2021년 10월 30일
·
1개의 댓글
·