허도경, 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 함수는 파라미터에 상태의 기본값을 넣어줍니다. 이 함수는 배열을 반환하며 첫 번째 원소는 상태 값, 두 번째 원소는 상태를 설정하는 함수를 나타냅..

컴포넌트의 수명은 페이지에서 랜더링되기 전인 준비 과정에서 시작하여 페이지에서 사라질 때 끝납니다. 조금 쉽게 이해를 하기 위해서는 생명주기에 사용되는 접두사를 확인하면 조금 이해하기가 쉽습니다. Will 접두사 : 어떤 작업을 동작하기 전 Did 접두사 : 어떤 작업을 동작한 후 라이프 사이클은 3가지 카테고리(마운트, 업데이트, 언마운트) 구분됩니다. 아래 리액트 생명주기 표를 보시면 조금 더 이해하기 쉬울거 같습니다. 리액트 생명주기 도표 1.마운트 DOM이 생성되고 웹 브라우저 상에서 나타나는 것을 마운트라고 합니다. constructor() - 컴포넌트를 새로 만들때만다 호출되는 생성자 getDerivedStateFromProps() - props에 있는 값을 state에 넣을 때 사용 rend..

리액트에 반복문을 사용할 때 Map함수를 사용합니다. Map함수를 조금 더 자세히 알고 싶으시면 Mozilla에서 제공하는 Map Docs를 살펴보거나 이전에 제가 작성한 Map 매서드 이해하기 글을 한번 읽어보시면 조금 더 이해하기 쉬울거에요. 같이 읽어보면 조금 더 도움이 되는 내용으로는 전개연산자와 filter 매서드 도 같이 한번 읽어 보시면 앞으로 우리가 React에서 반복문을 사용할 때 많은 도움이 될거라 생각합니다. 우선 오늘의 주인공인 Map에 대해서 간략히 살펴보겠습니다. arr.map( callback, [thisArg]) callback : 새로운 배열의 요소를 생성하는 함수. currentValue : 처리할 현재 요소 index : 처리할 현재 요소의 인덱스 array : 현재 처..

리액트에서는 ID 사용을 권장하지 않습니다. 컴포넌트 단위로 사용을 하는 주된 목적은 재사용성을 높이기 위한 게 가장 큰 목적인데 ID를 사용하게 되면 DOM에서 중복 ID값이 생길 수가 있게 되기 때문입니다. 그래서 리액트에서는 요소에 접근하기 위해 ref를 사용합니다. ref는 컴포넌트 내부에서만 동작하기 때문에 중복의 문제가 발생되지 않습니다. 예제코드 1 class ValidationSample extends Component { state = { password: '', clicked: false, validated: false, }; handleChange = (e) => { this.setState({ password: e.target.value, }); }; handleButtonClick..

1. 리액트에서는 카멜 표기를 원칙으로 합니다. 하이픈(-)이 들어가는 요소자리를 카멜 표기로 대체합니다. back-ground (x) backGround(o) font-size(x) fontSize(o) 2. 이벤트 이름은 카멜 표기로 작성합니다. onclick(x) onClick(o) onkeyup(x) onKeyUp(o) 3. 이벤트에 실행할 코드를 전달하는 것이 아니라 함수 형태의 값을 전달합니다. 4.DOM요소에만 이벤트를 설정할 수 있습니다. DOM요소(div, input, span)등의 요소에는 이벤트를 설정할 수 있지만 우리가 만든 컴포넌트에는 이벤트를 자체적으로 설정할 수 없습니다. 자세한 이벤트는 공식문서를 통해서 확인하실 수 있습니다. import React, { Component }..

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

기본 강의를 숙지하고 책의 예제를 따라 하기 위해 리액트에서 제공하는 CRA(Create React App) 프로젝트를 신규로 생성해서 공부를 하려 하였습니다. 기분 좋게 신규 프로젝트 생성 $ npx create-react-app my-app $ npx create-react-app my-app 하지만 폴더만 생성되었을 뿐 폴더 안에는 어떠한 내용도 생성되지 않았습니다. 이 문제로 한참 동안 시간을 허비하였는데 이는 기존에 설치한 CRA를 삭제하고 다시 설치하여야만 설치가 된다는 걸 알게 되었습니다. 기존에 global 옵션으로 create-react-app을 설치했다면 아래 커맨드로 삭제해야 합니다. $ npm uninstall -g —-save create-react-app 아래와 같은 에러가 나온..

이 글은 React에 관심이 있는 분들이라면 모두를 대상으로 작성되었습니다. 동기 워낙 빠르게 다변하는 IT에서 Angular, Vue, React는 확실히 자신들만의 생태계를 구축하며 Front개발에는 이제 빠져서는 안 되는 라이브러리로 자리 매김했습니다. 저도 Angular, Vue 두 프레임워크는 실무에서 사용을 해 본 적은 없지만 개인적으로만 공부를 해 본 상태였고 혼자서 공부를 하지 않고 있는데 하루가 다르게 변하는 코드들을 보면서 더 이상은 미룰 수 없다고 판단하여 공부를 시작했습니다. 운이 좋게도 저는 현재 개발팀에 소속되어서 UI 개발 업무를 담당하고 있는데 팀에서 인원들을 나누어 각자의 관심 분야를 공부하고 토의하는 자리를 만들면 좋겠다는 의견이 있었고 저는 관심분야인 React를 선택하..

React를 최근에 공부를 하고 있습니다. 요즘은 너무나 많은 자바스크립트 라이브러리가 나와 있고 이미 실무에서도 해당 라이브러리를 많이 사용하고 있습니다. 이전에 Vue를 공부하면서 포트폴리오도 Vue로 만들기도 했지만 혼자서 공부를 한다는 것에 한계가 있었고 아무래도 혼자서 공부를 하며 업무와 병행하다 보니 공부를 한다는 게 생각처럼 쉽지 않았습니다. 이 글은 큰 목차로 보면 UI 개발 카테고리에 포함되어야 하는 것이 맞지만 React는 너무나 큰 생태계를 가지고 있고 React만으로도 다루어야 되는 이야기 목차가 많다고 생각하여 별도의 항목으로 나누게 되었습니다. 이 글은 저와 같이 React를 공부를 하고 싶은데 막연히 어떻게, 또 어디서부터 시작을 해야 되지? 하는 의문과 불안감 등의 고민을 가..