0. 사건의 발단 평화로운 어느날, Custom Webpack을 사용해서 만든 프로젝트에 styled-component를 사용할때 발생하였다.... 나는 분명 yarn add styled-component를 입력하고 package.json에 제대로 입력되어있는 것까지 확인하였는데, 왜 모듈이 없다고 나오는 것일까?! 1. 바로 해결 Holy!! yarn add styled-components 를 사용해서 설치해야하는 것이였다!?

1. PropTypes ? Props의 타입을 확인하기 위한 도구이다. 애플리케이션 개발을 진행하다가 점차 규모가 커지면서 타입 확인을 통해서 버그를 잡을 경우가 있다. Flow 또는 TypeScript 같은 JavaScription 도구를 사용할 수 있지만 React에 내장된 타입 확인 기능이 PropTypes이다. 성능상의 이유로 개발 모드에서만 확인할 수 있다. 2. 사용하기 하나의 자식만 요구하기 import PropTypes from 'prop-types'; class MyComponent extends React.Component { render() { // 이것은 반드시 하나의 엘리먼트여야 합니다. 아니라면, 경고(warn)가 일어날 것입니다. const children = this.prop..

1. Render Props 재사용의 한 방법이다. ( Composition, HOC, render props ... ) React 컴포넌트 간에 코드를 공유하기 위해 함수 props를 이용하는 간단한 기능이다. 2. 사용 이유 class MouseTracker extends React.Component { constructor(props) { super(props); this.handleMouseMove = this.handleMouseMove.bind(this); this.state = { x: 0, y: 0 }; } handleMouseMove(event) { this.setState({ x: event.clientX, y: event.clientY }); } render() { return ( M..

1. Portals? DOM 계층 구조 바깥에 있는 DOM 노드로 자식을 렌더링 하는 최고의 방법이다. 일반적으로 컴포넌트를 렌더링 메서드에서 엘리먼트를 반환할 때 부모 노드에서 가장 가까운 자식으로 DOM이 마운트 된다. 그런데 가끔 DOM의 다른 위치에서 자식을 삽입하는 것이 유용할 수 있다. 예를 들어, overflow: hidden이나 z-index가 있는 경우 시각적으로 자식을 "튀어나오도록" 보여야 하는 경우가 있다. 다이얼로그, 툴팁 같은 것 말이다. 2. 필요성 import React, { useState } from "react"; export default function Portals(props) { const [isOpen, setIsOpen] = useState(false); re..

0. 들어가며 처음 React를 공부할때, 보통 CRA(create react app)을 사용해서 프로젝트를 만들지만 Webpack과 Babel을 공부하는 겸 한번 빈 페이지에서 프로젝트를 만들어보겠다. 1. 세팅 및 패키지 설치 npm init npm init 명령어를 통해서 package.json을 만들어주자! npm i --s react react-dom React 프로젝트를 만들 것이기 때문에 당연히 react와 react-dom을 설치한다. npm i -D --s webpack webpack-cli webpack-dev-server - webpack : webpack을 사용해서 프로젝트를 만들기 때문에 당연히 설치한다. - webpack-cli : 커맨드 라인에서 webpack을 사용할 수 있게..

0. 들어가면서 웹사이트를 만들다 보면 필연적으로 만나는 기능 중 하나인 Slide! 요즘은 워낙 고수분들이 가공하여 배포를 해줘서 npm에서 검색을 하면 웬만한 기능은 사용이 가능하다. 그런데 react-slick이라는 좋은 Slide가 사용에 대해서 조금 불편한 점이 있어 그 부분 정리하는 김에 같이 정리하였다. 물론 내가 Document를 못 찾는 걸 수 있다.... 1. 공통 react-slick은 기본적으로 태그 안에서 슬라이드 별 필요한 옵션을 넣어 사용한다. 또 본문에 SlideContainer, SlidePage 같은 태그가 있을 건데, 그건 styled-component를 사용해서 기본적인 디자인을 넣었다. 추가로 기본적으로 제공하는 css 스타일을 적용하기 위해서 두 가지 css 파일을..

1. Hooks? Class 컴포넌트의 단점을 보완하면서 라이프사이클 등과 관련된 함수를 재사용 가능하게 함 Class 컴포넌트의 단점으론 1. 컴포넌트 사이에서 상태 로직을 재사용하기 어렵다. Class 컴포넌트의 로직을 재사용하는 방법은 불가능한 것은 아니다. 하지만 render props, 고차 컴포넌트 같은 패턴을 사용해서 해결해야 했다. 그래서 Hook은 좀 더 편하게 상태 로직을 재사용할 수 있도록 도와준다. 2. 복잡한 컴포넌트들은 이해하기 어렵다. 데이터를 가지고 오는 작업을 componentDidMount에서 일어날 때가 있고 componentDidUpdate에서 일어날 때가 있었다. 즉, 관련이 있는 코드는 분리되지만, 관련 없는 코드들은 단일 메서드로 결합되어있다. 그것으로 인해서 버..

1. JSX 문자도 HTML도 아닌 JavaScript의 확장 문법 const text = "Hello, world!"; const textClass = "title" const element = {text} React 개발을할 때 JSX는 필수가 아니다. 하지만 시각적으로 더 도움이 된다. 2. Babel JavaScript Complier로 React 언어를 JavaScript가 이해할 수 있게 해석해주는 프로그램이다. const text = "Hello, world!"; const textClass = "title" const element = {text} = // 바벨처리 => const text = "Hello, world!"; const textClass = "title"; const elem..