개요 더 좋은 React 컴포넌트를 구조에 대해 리서치를 하다보니 이라는 키워드를 자주 접하게 되었다. React의 아버지 의 글을 보면서 어떤 패턴인지 확인 해보자. 참고: 2019년에 남긴 Dan Abramov에 의하면 그는 더이상 이 패턴을 강제로 사용하기를 추천하지 않는다고 한다. (컴포넌트를 이 패턴으로 나누지 않고 커스텀 훅을 이용해서도 가능하는 등에 다양한 패턴이 있을 수 있기에) 왜 이러한 패턴을 정의했는가? 컴포넌트를 더 쉽게 재사용할 수 있기 때문이다. 살펴보자 이 두 형태의 컴포넌트들을 명확히 구분하기 위해서 각 각 다른 폴더에 넣는다. presentational 컴포넌트 어떻게 생겼는 지(표현)에 집중한다. presentational과 container 컴포넌트 둘 다 가질 수 있지만, 보통 DOM 마크업과 스타일을 가지고 있다. 종종 this.props.children 을 통해 방지했던 것을 허용한다. Flux actions 나 store 와 같은 다른 앱…

useCallback은 무엇인가? 개요 댓글 기능을 가진 Component예제 코드를 보다가 작성 된 내용을 요청하고 콜백함수로 hook으로 감싼 함수를 호출하는 부분을 보고, 저 hook은 무슨 역할을 하는 건지 궁금해졌다. 공식문서를 먼저 살펴보았다. 정의 Returns a memoized callback. 대정의는 간단한다. memoized(저장되어진) callback(콜백함수를) return(리턴) 하는 것이다. Pass an inline callback and an array of dependecies. will return a memoized version of the callback that only changes if one of the dependencies has changed. This is useful when passing callbacks to optimized child components that rely on reference equality to…

1. 딥브레인AI 아카데미 수료 및 프로젝트 완료 🥛 내배캠을 수료한 후 지난 5주간 딥브레인AI 아카데미에서 웹어플리케이션을 만들기 위한 여러 기술들을 배웠다. 매주 토요일에 풀타임(9:30-18:00)으로 진행되긴 했지만, 깊게 배우기에는 너무 짧은 시간이였다. 박물관 AI 가이드는 , 와 딥브레인AI에서 제공한 를 활용한 프로젝트였다. 시간이 많지 않았기 때문에(같이하시는 분을 일하고 계시고, 나는 스파르타 공모전 프로젝트도 같이 진행했다) 완성도는 부족하지만 내게는 새로웠던 기술로 웹애플리케이션을 만들 수 있어서 재미있고, 뿌듯했다. 1-1 이번 프로젝트로 얻은 것 framework에서 웹애플리케이션 개발이 가능하다. 를 통해 컴포넌트를 만들고 화면 구성할 수 있다. 로 컴포넌트를 꾸밀 수 있다. 비디오 제작 프로세스를 일정한 주기로 API 요청 및 확인하여 진행상황을 화면에 표시할 수 있다. (요청마다 프로세스 진행상황을 응답해주는 경우) 1-2 내가 작업한 부분 살펴…

에러메시지를 띄우기 위한 re-render 어떻게? 개요 스파르타 공모전에 참여하여 되었다. 지금은 를 만들고 있다. 아직 서버로 요청하는 부분은 작업하지 않았고 custom hook을 만들어 이메일과 패스워드 정보에 대한 유효성검사를 하는 부분까지 작업하였다. 이메일 형식에 맞지 않는 값을 입력하거나 비밀번호를 공란으로 둔 채 로그인 버튼을 누르면 에러메시지가 나와야하는데, 이게 를 할 경우 짜여진 코드에 의해서 에러메시지가 나올 텐데 어떻게 해야할 지 고민이 되었다. 더미 state를 만들어 그 state를 변화시키는 방식으로 re-render를 하는 글을 보았으나 이는 좋지 않은 구조라고 글쓴이가 얘기를 해서 고민 끝에 아래와 같이 코드를 작성하여 해결하였다. 나의코드 submitHandler함수는 로그인 버튼을 클릭 시 호출되는 함수인데, 이메일이나 비밀번호가 유효하지 않으면 blur가(입력 필드에 포커스아웃) 될 때 호출하는 함수를 콜하게 하였다. 이렇게 되면 함수 콜에 …