UI Component 사용자와 상호작용하는 기본적인 형태로 어느 곳에서도 자신의 기능을 수행하는 가장 작은 단위를 말합니다. 좋은 컴포넌트는 재사용이 가능하고, 일관성과 통일성이 있어 사용자들이 항상 동일한 기능으로 인식할 수 있어야합니다. Component의 종류 사용자가 조작할 때를 기준으로 3가지로 나뉘어집니다. ...

Material UI (MUI) Material UI는 Google의 Material Design을 구현하는 React 오픈소스 라이브러리입니다. 디자인을 구현할 수 있는 여러 컬렉션을 컴포넌트를 사용하듯이 조립해 쉽게 디자인을 할 수 있습니다. 기본적으로 제공하는 컬렉션 외에도 자유롭게 커스터마이징해서 사용할 수 있습니다. 호환성 및 변경의 ...

craco 사용하는 이유 Create React App(CRA)처럼 babel 설정을 커스텀할 수 없는 환경에서는 Emotion 사용 시 매번 JSX Pragma 선언이 필요합니다. CRA에서도 eject를 통해 설정할 수 있지만 webpack, babel 등의 설정들을 유지보수해주는 등의 CRA 장점을 잃습니다. 따라서, eject를 하지 않고...

Emotion HTML 요소 혹은 React 컴포넌트에 CSS를 적용하기 위한 라이브러리입니다. CSS-in-JS 라이브러리 중에서는 Styled Component 라이브러리가 가장 대두 되었으나, MUI(Material UI)가 스타일링 엔진을 Emotion으로 채택하면서 이목이 집중되고 있습니다. Emotion의 장점 classNa...

Inline Style 먼저 React 컴포넌트를 별도의 CSS-in-JS 라이브러리 없이 순수하게 CSS로만 스타일하는 가장 기본적인 방법을 알아보겠습니다. 가장 간단한 방법은 React 컴포넌트에 CSS 인라인 스타일을 바로 적용하는 것입니다. 하지만 React는 자바스크립트로 작성하기 때문에 웹페이지에서 인라인 스타일을 적용할 때와 약간의 ...

Shared State 어떤 컴포넌트의 State에 있는 데이터를 여러 개의 하위 컴포넌트에서 공통적으로 사용하는 경우를 말합니다. 위 그림의 자식 컴포넌트 A, B는 부모 컴포넌트의 value에 각각 2, 3을 곱해서 표시하는 컴포넌트입니다. 이러한 경우 자식 컴포넌트들은 값을 갖을 필요없이 부모 컴포넌트의 state에 있는 값에 각각 2,...

Context React 에서 데이터는 위에서 아래로 props를 통해 전달합니다. 따라서, 여러 컴포넌트들에 전해줘야 하는 경우(선호 로케일, UI 테마), 컴포넌트에서 사용하고 있는 데이터를 현재의 데이터 흐름에 넣고 싶은 경우 등의 과정은 번거로울 수 있습니다. Context를 이용하면, 트리 단계마다 명시적으로 props를 넘겨주지 않...

Composition 합성 React에서 컴포넌트를 구성하는 방법으로 여러 개의 컴포넌트를 합쳐서 새로운 컴포넌트를 만드는 것을 말합니다. 그렇다면 여러 개의 컴포넌트들을 어떻게 조합할까요? Containment 하위 컴포넌트를 포함하는 형태의 합성 방법을 말합니다. Sidebar, Dialog 같은 Box 형태의 컴포넌트는 자신의 하위 ...

HTML의 Form & React의 Form HTML 폼 엘리먼트는 폼 엘리먼트 자체가 내부 상태를 가지기 때문에, React의 DOM 엘리먼트와 다르게 동작합니다. 예를 들어, 순수한 HTML에서 다음 코드는 name을 입력받습니다. <form> <label> Name: <input type=...

Javascript의 Truthy / Falsy Falsy boolean을 기대하는 문맥에서 false로 평가되는 값입니다. 0, -0, 0n(bigint), ''(빈 문자열), null, undefined, NaN(Not a Number) Truthy boolean을 기대하는 문맥에서 tr...