허도경, limewhale

컴포넌트 기반 프론트엔드 개발 방법이 발전하면서 CSS 개발 방법도 새로운 방법론과 생겨나고 있습니다. 웹이 점점 복잡해지고 CSS를 보다 전문적이고 체계적으로 관리하고 싶은 욕구는 2014년 페이스북 개발자인 개발자인 Christopher Chedeau aka Vjeux 의 발표에서 CSS-in-JS를 세상에 공개했고 이는 CSS 코드 작성의 새로운 대안으로 떠올랐습니다. 이 발표에서 Vjeux는 다음의 항목을 들어 CSS를 작성하는 어려움을 설명하였습니다. Global namespace: 모든 스타일이 global에 선언되어 별도의 class 명명 규칙을 적용해야 하는 문제(클래스 이름 중복 문제) Dependencies: css간의 의존관계를 관리하기 힘든 문제(스타일 상속에 의한 중복 문제) De..

이전 컴포넌트에서 잠깐 다룬 적이 있는 함수형 컴포넌트의 새로운 기능 Hooks를 알아보려고 합니다. Hooks는 리액트 v16.8에 새로 도입된 기능으로 함수형 컴포넌트에서도 상태 관리를 할 수 있는 useState, 랜더링 직후 작업을 설정하는 useEffect 등의 기능을 제공하여 기존의 함수형 컴포넌트에서 할 수 없었던 다양한 작업을 할 수 있게 도와줍니다. 1.useState useState를 사용하기 위해서는 React에 useState를 선언해 주어야 합니다. import React, { useState } from 'react'; useState 함수는 파라미터에 상태의 기본값을 넣어줍니다. 이 함수는 배열을 반환하며 첫 번째 원소는 상태 값, 두 번째 원소는 상태를 설정하는 함수를 나타냅..

어떻게 보면 리액트에서 가장 핵심이 되는 내용이 이번 컴포넌트의 내용이 아닐까 생각합니다. 컴포넌트를 공부하면서 props, state, 그리고 리액트 hooks 개념을 살펴보려고 합니다. 리액트에서 우리가 보는 하나의 화면에는 여러 개의 컴포넌트로 구성되어 있습니다. 컴포넌트는 사용자가 만들수 있는 하나의 데이터 블록(값이 변하는 영역)이라고 생각하면 조금은 이해가 쉬울 거 같아요. 그래도 이해가 잘 안가면 아래 그림을 한번 볼게요. 위 그림은 제가 예시로 만든 영상 목록 화면입니다. 그림에서 보면 컴포넌트로 구분할 수 있는 곳은 검색 영역, 영상 상세 view, 영상 리스트, 영상 썸네일 목록 이렇게 4개로 각각 구분될 수 있을 거 같아요. 값이 변하지 않는 곳은 컴포넌트로 분리하지 않아도 무방하고 ..