개요 더 좋은 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…

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

오늘 공부한 React 예제 코드 살펴보기 개요 React(리액트) 할 줄 아는 프론트엔드 개발자가 되고 싶어 요즘 Udemy에서 React - The Complete Guide (incl Hooks, React Router, Redux) 강의를 듣고 있다. 오늘 들은 관련 강의 중에 나온 App.js 예제 코드를 살펴보자. (설명은 주석으로) 예제코드 새로 배운 것 자바스크립트에 fetch를 이용하여 api서버에서 데이터를 가져올 수 있다. firebase를 통하여 아주 간단하게 api서버를 만든다(무료) 오늘 공부한 React 예제 코드 살펴보기 개요 예제코드 새로 배운 것

오잉? 상태변화 할 때 값을 복사하고 한다? 위와 같이 라는 배열의 state를 변경할 때 직접 해당 배열의 값을 변경하는 것이 아니라 를 사용하여 배열을 복사하고, 값을 변경하고, state 변화를 해준다. 직접 객체변경 혹은 데이터 변경이 이루어져도 결과는 같지만 이 immutability(불변성)이 가진 장점이 강력하기 때문에 React에서도 권장한다. immutability 장점 1. 복잡한 특징을 단순하게 을 위에 과정을 통해 쉽게 할 수 있다. 이전 데이터를 재사용하기 용이하다 2. 변화 감지 객체가 직접 수정이 이루어지면 변화 감지를 위해서 이전 사본과 전체 객체 트리를 돌며 비교해야 한다. 반면 immutable 객체는 이전 객체와 다르면 변화 했다고 빠르게 판단할 수 있다. 3. 리렌더링 시기 결정 React에서 를 만드는데 도움을 주고, 성능을 최적화 할 수 있다. 직접적으로 값을 변경하면 매번 state변화와 함께 가상DOM에서 리렌더링이 발생하기 때문에 CPU…

리액트(React), 누구세요? 공식홈페이지의 정의를 보자. A JavaScript library for building user interfaces Declarative React makes it painless to create interactive UIs. Design simple views for each state in your application, and React will efficiently update and render just the right components when your data changes. Component-Based Build encapsulated components that manage their own state, then compose them to make complex UIs. Learn Once, Write Anywhere We don’t make assumptions about the rest of your technology …