FrontEngineer JungBam

제어 컴포넌트와 비제어 컴포넌트는 각각 장단점이 있는 방식이다. 그런데 React 팀에서는 제어 컴포넌트를 권장한다.(공식문서에 명시되어 있음.) 오늘은 왜 그런지 다시한번 상기해보는 시간! React에서는 상태값이라는 값을 통해 가상돔에서 어떤 노드리스트를 수정할 것인가를 체크한다. 또한 리렌더링 없이 DOM요소에 접근하는 useRef를 통한 비제어 컴포넌트도 지원한다. 지원하는데에는 이유가 있을 것이고, 각각 사용하는 곳을 선택하는 근거가 있을텐데 어떤 점들이 있는지 알아보자. 먼저 각 방식에 있어 장, 단점을 알아보고 넘어가자. 구 분 장점 단점 제어 컴포넌트 1. 상태가 React 컴포넌트 내에 있으므로 입력 데이터를 직접 조작하거나 검증하는 것이 쉽다. 2. React의 "single sourc..

import React from "react"; const ErrorBoundary = (ProtectedComponent: React.ComponentType) => { return class Boundary extends React.Component { state = { hasError: false, }; static getDerivedStateFromError(error: Error) { return { hasError: true }; } componentDidCatch(error: Error, errorInfo: React.ErrorInfo): void { this.setState({ hasError: true, }); } render(): React.ReactNode { const { hasEr..

제어 컴포넌트 HTML에서 input, textarea, select와 같은 폼 엘리먼트는 일반적으로 사용자의 입력을 기반으로 자신의 state를 관리하고 업데이트 합니다. React에서는 변경할 수 있는 state가 일반적으로 컴포넌트의 속성에 유지되며 setState()에 의해 업데이트 됩니다. 우리는 React state를 '신뢰 가능한 단일 출처'로 만들어 두 요소를 결합할 수 있습니다. 그러면 폼을 렌더링하는 React 컴포넌트는 폼에 발생하는 사용자 입력값을 제어합니다. 이러한 방식으로 React에 의해 값이 제어되는 입력 폼 엘리먼트를 '제어 컴포넌트'라고 합니다. 여기서 잘 이해가 되지 않는다. 먼저는 state를 신뢰 가능한 단일 출처로 만들어 두 요소를 결합하고 그러면 폼을 렌더링하는 ..

리액트가 업데이트를 시도하는 경우 1. props가 변경될 때 2. state가 변경될 때 3. 사용하고 있는 전역상태가 변경될 때 4. 부모 컴포넌트가 리렌더링될 때 즉, state와 props는 리렌더링에 관여하는 것이라는 점과 어떤 상태에 대해서 클라이언트 사이드의 메모리 위에 값을 저장하는 값이라는 점에서 공통되지만 props는 자식 컴포넌트가 부모 컴포넌트에게서 받은 값으로 자식컴포넌트는 컴포넌트 내부에서 업데이트를 시킬 수 없지만 state는 컴포넌트 내부 자체적으로 setState를 통해 업데이트 할 수 있다는 차이가 있다.

이번 실전프로젝트 초기버전에서는 webRTC를 이용한 그룹채팅을 채팅과 함께 구현하려고 했었다. 이때 고민했었던 것이 socket 인스턴스를 어디에서든 하나의 인스턴스로 만들어 주고 싶었고 이 때 찾은 방법이 싱글톤 방법이었다. 싱글톤 패턴의 가장 기본적인 방법은 네임스페이스 패턴을 객체로 만들어 사용하는 것이다. 이렇게 되었을 때에는 모든 변수들이 다 공개되는 그림이 그려진다. 예를 들어 아래와 같은 네임스페이스 패턴의 객체를 생성하면 eventName. 을 찍게 되면 안에 있는 모든 변수들이 공개되는 것을 말한다. 이러한 변수들을 숨기고자 한다면 숨길 수 있을 것이다. 하나의 방법은 즉시실행함수를 통해 반환값으로 변수들을 주는 것이다. 아래의 코드를 예시로 보면 이해하기 쉬울 것이다. 싱글톤 패턴을 ..

프로젝트가 끝나고 나의 코드를 본 많은 동기생들이 물어본 것이 useRef였다. 내가 왜 useRef를 사용했는지에 대한 질문들이었다. 나는 그저 공식문서에 있는 답변을 해주었다. 내가 사용한 이유는 매번 렌더링을 할 때에 동일한 객체를 제공해주기 위해서라고. 반복되는 질문을 받다보니 글로 정리해서 준다면 어떨까라는 생각이 되어서 정리해보기로 했다. 위에는 reactjs.org에 설명된 useRef의 기본설명이다. useRef는 통상적으로 DOM에 접근하는 방법으로 사용한다. input이라던가 아니면 어떤 요소에 focus를 할당한다던가 아니면 scroll 이벤트를 할때에 사용한다.(이건 공식문서에 보면 이런 상황에서 사용하라고 아주 잘 설명되어 있다.) 근데 이러한 부분이 아니라 함수형 컴포넌트에서 렌..

이 부분은 실제 내가 구현한 화면을 보면서 이야기를 하면 편하겠다. 프로젝트에서 조커를 픽하면 조커의 위치를 선택하는 화면을 구성한 것. (혹시나 프로젝트가 궁금하다면 : https://davinci-code.online) 조커 선택 화면 react-beatiful-dnd는 사용하는 것은 복잡할 수 있지만 이해하고 나니 너무 간단(?) 했다. 큰 틀은 처음 Context를 할당해주고 Drop 시킬 영영과 Drag 해줄 친구를 설정하고 Context에서 제공되는 메소드를 통해 드래그가 시작될 때 드래그가 끝날 때 등 각각의 이벤트를 만들어 주면 되는 것이었고 이걸 이해했음에도 계속 react-beutiful-dnd 에러가 콘솔에 찍히면서 애를 좀 먹었는데 이것 또한 스택오버플로우를 보면서 해결하니 금방 해..

멘토링을 통해 큰 깨달음을 얻었다. 지금까지 모달은 display 값을 바꿔줌으로써 그 모달을 보여주고 감추고 하는 작업으로 진행했고 그로 인해서 초기값을 할당하기 위해 상태값을 변경하는 코딩을 해왔었다. 근데 이렇게 작업하다 보니 모달이 닫힐 때 모달 안에 있는 값들을 초기화 해줘야했다.(지금 생각해보면 멍청하다.) 이걸 한번에 해결하는 것은 모달에 해당하는 컴포넌트 자체를 호출할 때만 띄워주면 되는 것...그럼 당연히 호출되면서 초기화가 될테니까..ㅠㅠ 그래도 지금이라도 깨달아서 다행이다. 앞으로 display를 통해서 컴포넌트를 렌더링하는 일은 없을 듯. 의도를 갖고 작업하는 게 아니라면.