0915 TIL React Custom Component

useRef

DOM 엘리먼트의 주소값을 활용해야 하는 경우에 useRef훅을 사용한다.

focus
text selection
media playback
에니메이션 적용
d3.js, greensock 등 DOM 기반 라이브러리 활용

이런 예외적인 상황에서 사용한다.

controlled component

Controlled Component는 State에 따라서 값을 갱신하는 컴퍼넌트이다.

React는 내부의 상태(state)를 '신뢰 가능한 단일 소스(Single Source of Truth)'로 관리하려는 설계 원칙을 가지고 있다.
즉 자식 컴포넌트가 data가 필요할 경우, 해당 data는 가장 가까운 공통 부모 컴포넌트에게서만 props의 형태로 전달받아서 사용해야 한다.
대부분의 HTML 엘리먼트들(ex. <div> 등)은 엘리먼트가 내부적으로 어떤 데이터를 가지지 않기 때문에 문제될 것이 없다.

하지만 HTML 엘리멘트 중 자체적으로 특정 data를 가지는 엘리먼트들이 있다. 바로 <form> 태그의 엘리먼트들이다.(<input>, <textarea>, <select> 등)

이들은 user가 DOM에서 어떤 정보를 입력하거나 선택할 경우, 해당 정보를 HTML 엘리먼트가 직접 보관하게 되는데, 이는 위에서 언급한 리액트의 핵심 설계원리인 '신뢰 가능한 단일 소스' 원칙에 위배되는 상황이다.
따라서 이를 해결하기 위해서 React에서 Controlled 컴포넌트의 개념이 나온 것이다.
value에 할당된 state값을 직접 갱신하고 전달하기 때문에 기본적으로 권장하는 컴퍼넌트 사용방식이다.

-> 요약하자면 상태와 (input)화면에 보이는게 일치하는 것

Storybook과 같은 UI 개발 도구를 사용하는 이유

애플리케이션의 다양한 상황에 구애받지 않고 UI 컴포넌트를 집중적으로 개발할 수 있다.
회사의 내부 개발자들을 위해 문서화(documentation)를 하여 회사의 UI 라이브러리로써 사용하거나, 외부 공개용 디자인 시스템(Design System)을 개발하기 위한 기본 플랫폼으로 사용

toy 17. Balanced Brackets

const balancedBrackets = function (str) {
  const stack = [];
  const opener = {
    '{': '}',
    '[': ']',
    '(': ')',
  };
  const closer = '}])';

  for (let i = 0; i < str.length; i++) {
    if (str[i] in opener) {
      stack.push(str[i]); //stack에 여는 괄호만 들어감
    } else if (closer.includes(str[i])) {
      const top = stack.pop();  //닫는괄호는 pop시킴
      const pair = opener[top]; //닫는괄호의 pair인 여는 괄호
      if (pair !== str[i]) { //짝이 안맞으면
        return false;
      }
    }
  }
  return stack.length === 0; //짝이 맞으면 stack에 남는게 없다
}

그 외

event.code는 event.key와 다르게 자판기의 물리적 배치를 고려했다.
즉, 왼쪽 ctrl과 오른쪽 ctrl을 구분할 수 있다.

참고

balanced brackets
controlled component

느낀점

요즘 매일 늦게 자서그런지 몸도 마음도 너무 지쳐버렸다. 운동을 꾸준히 하고 적어도 2시엔 자러가야 다음날 지장이 없을 것같다.