코딩 일기장

💡 Render props pattern 이란? render props는 코드의 재사용성을 높임과 동시에, 관심사의 분리를 이룰 수 있도록 만들어주는 패턴 render props란 props에 넘겨주는 값이 JSX요소를 반환하는 함수는 prop을 말한다. hello world} /> render 라는 prop에 JSX Element를 반환하는 함수를 넣어 사용한다. const Title = ({ render }) => render(); 예시 drawing dream 프로젝트에서 회원가입 시 입력 값에 대해 유효성 검사를 진행하였다. render props pattern을 적용하기 전 프로젝트의 구조 SignUp.js └ InputContainer.js ├ Input.js └ ValidContainer.j..

컴포넌트 주도 개발(Component-Driven-Development) 컴포넌트를 모듈 단위로 개발하여 사용자 인터페이스 구축에 도달하는 개발 및 설계 방법론 기본적인 컴포넌트 단위부터 시작해서 UI view를 구성하기 위해 점진적으로 조립해가는 상향적 특징을 가지고 있다. 장점 디자인 체계화, 디자이너와 효율적인 협업 재사용성: 다른 프로젝트에서도 쉽게 쓰고 공유 가능 Decoupling: CSS, JS, I18n, UI 단위 테스트 등 UI 패턴이 3회 이상 사용되는 경우. 재사용 가능한 UI 컴포넌트로 간주한다. UI 컴포넌트가 3개 이상의 프로젝트/팀에서 사용되는 경우, 디자인 시스템에 포함시킨다. install npx -p @storybook/cli sb init npm run storyboo..

리덕스는 가장 많이 사용하는 리액트 상태 관리 라이브러리이다. 리덕스를 사용하면 컴포넌트의 상태 업데이트 관련 로직을 다른 파일로 분리시켜서 더욱 효율적으로 관리할 수 있다. 컴포넌트끼리 똑같은 상태를 공유해야 할 때도 여러 컴포넌트를 거치지 않고 손쉽게 상태 값을 전달하거나 업데이트할 수 있다. 액션 상태에 어떠한 변화가 필요하면 액션이란 것이 발생한다. 이는 하나의 객체로 표현 되는데, 액션 객체는 { type: 'TOGGLE_VALUE' } 와 같은 형식으로 이루어져 있다. 액션 객체는 type 필드를 반드시 가지고 있어야 한다. 이 값은 액션의 이름이라고 생각하면 된다. 그 이외의 값들은 나중에 상태를 업데이트 할 때 참고해야 할 값이며, 작성자가 마음대로 넣을 수 있다. { type: 'ADD_..

Context API는 리액트 프로제그에서 전역적으로 사용할 데이터가 있을 때 유용한 기능이다. 사용자 로그인 정보, 애플리케이션 환경 설정, 테마 등 여러가지 종류가 있을 수 있다. Context API는 리액트 v16.3부터 사용하기 쉽게 개선되었다. Context API를 사용한 전역 상태 관리 흐름 리액트 애플리케이션은 컴포넌트 간의 데이터를 props로 전달하기 때문에 컴포넌트 여기저기서 필요한 데이터가 있을 때 주로 최상위 컴포넌트인 App의 state에 넣어서 관리한다. 하위 컴포넌트가 많아지면 각 하위 컴포넌트에 상태 업데이트 함수를 여러번에 걸쳐서 전달 해야한다. 이러한 상황은 프로젝트의 유지 보수성이 낮아질 수 있다. 그렇게 때문에 리덕스나 MobX 같은 상태 관리 라이브러리를 사용하여..

웹을 만들다보면 처리할 때 시간이 걸리는 작업이 있다. 웹에서 서버 쪽 데이터가 필요할 때는 Ajax 기법을 사용하셔 서버의 API를 호출함으로써 데이터를 수신한다. 이렇게 서버 API를 사용해야 할 때는 네트워크 송수신 과정에서 시간이 걸리기 때문에 즉시 처리되는 것이 아니라, 응답을 받을 때까지 기다렸다가 전달받은 응답 데이터를 처리한다. 자바스크립트에서 비동기 작업을 할 때 흔히 사용하는 방법은 콜백 함수를 사용하는 것이다. 콜백 함수 function increase(number, callback) { setTimeout(() => { const result = number + 10; if (callback) { callback(result); } }, 1000) } increase(0, resul..

리액트 라우터 v6 변경점 switch → routes 네이밍 변경 기존의 route 들을 구성하는 부모 요소를 switch 라는 네이밍으로 사용하였지만 v6에서는 route 복수개를 뜻하는 routes로 이름이 변경되었다. StaticRouter의 import 위치 변경 import { StaticRouter } from 'react-router-dom/server'; exact 옵션 삭제 기존 / 라우트의 경우 React Router 의 디폴트 매칭 규칙으로 인해 앞부분만 일치해도 전부 매칭되기 때문에 정확히 라우트를 일치시키고자 exact 속성을 사용하였으나 v6부터 기본적으로 정확히 일치하도록 매칭 규칙이 변하여 exact 옵션을 더이상 하용하지 않는다. 만약 하위경로에 여러 라우팅을 매칭시키고 ..

일반 css 일반 CSS를 작성할 때 중요한 것은 CSS 클래스를 중복되지 않게 만드는 것이다. CSS 클래스 중복을 방지하는 방법은 이름을 지을 때 특별한 규칙을 사용하는 것, CSS selector를 활용하는 것이다. 이름 짓는 규칙 클래스 이름을 컴포넌트 이름-클래스 형태로 지어 실수로 중복되는 클래스를 방지한다. 또는 이름을 지을 때 일종의 규칙을 준수하여 해당 클래스가 어디에서 어떤 용도로 사용되는지 명확하게 작성하는 BEM 네이밍을 사용한다. .App-header {} /* 컴포넌트 이름-클래스 형태 */ .card_title-primary {} /* BEM 네이밍 */ CSS selector CSS selector를 사용하면 CSS 클래스가 특정 클래스 내부에 있는 경우에만 스타일을 적용할 ..

Hooks는 함수 컴포넌트에서도 상태 관리를 할 수 있는 useState, 렌더링 직후 작업을 설정하는 useEffect 등의 기능을 제공하여 기존의 함수 컴포넌트에서 할 수 없었던 다양한 작업을 할 수 있게 해준다. useState useState는 가장 기본적인 Hook이며, 함수 컴포넌트에서 가변적인 상태를 지닐 수 있게 해 준다. import React, { useState } from "react"; const Counter = () => { const [value, setValue] = useState(0); return ( 현재 카운터 값은 {value}입니다. setValue(value + 1)}>+1 setValue(value - 1)}>-1 ); }; export default Coun..

render() render() { ... } 컴포넌트의 모양새를 정의한다. 라이프사이클 메서드 중 유일한 필수 메서드 메서드 안에서 this.props, this.state에 접근할 수 있으며, 리액트 요소를 반환. render 안에서는 이벤트 설정이 아닌 곳에서 setState를 사용하면 안 되며, 브라우저 DOM에 접근해서도 안 된다. DOM 정보를 가져오거나 state에 변화를 줄 때는 componentDidMount에서 처리해야 한다. constructor constructor(props) { ... } 컴포넌트의 생성자 메서드, 컴포넌트를 만들 때 처음으로 실행된다. state를 정할 수 있다. getDerivedStateFromProps props로 받아온 값을 state에 동기화 시키는 용..

리액트 컴포넌트에는 라이플사이클(생명주기)가 존재한다. 컴포넌트의 수명은 페이지에 렌더링 되기 전인 준비 과정에서 시작하여 페이지에서 사라질 때 끝난다. 컴포넌트를 처음으로 렌더링할 때 어떤 작업을 처리하거나 컴포넌트를 업데이트하기 전후로 어떤 작업을 처리할 수도 있고, 불필요한 업데이트를 방지해야 할 수 도 있다. 라이플 사이클 메서드는 클래스형 컴포넌트에서만 사용할 수 있다. 라이프사이클 라이프사이클 메서드의 종류는 9가지이다. Will 접두사가 붙은 메서드는 어떤 작업을 작동하기 전에 실행하는 메서드이고, Did 접두사가 붙은 메서드는 어떤 작업을 작동한 후에 실행하는 메서드다. 라이프사이클은 총 3가지 마운트, 업데이트, 언마운트 카테고리로 나눈다. 마운트 DOM이 생성되고 웹 브라우저상에 나타나..