JavaScript/React.js 썸네일형 리스트형 HOC (Higher Order Component) 리액트 Higher-order Component(HOC) 코드를 작성하다보면, 자주 반복해서 작성하게 되는 코드들이 있다. 우리는 주로 그러한 것들을 함수화해서 재사용 하곤 한다. 컴포넌트 또한 비슷하다. 같은 UI 관련 코드가 재사용 될 수 있다면 우리는 컴포넌트를 만들어서 컴포넌트를 재사용한다.그런데 컴포넌트 기능 상에도, 자주 반복되는 코드들이 나타날 수 있다. 소프트웨어 개발 원리 중에서 DRY 라는 개념이 있다. - 같은 작업을 반복하지 마라 (Don't repeat yourself) 리액트 컴포넌트를 작성하게 될 때 반복될 수 있는 코드들은, HOC를 만들어서 해결해줄 수 있다. HOC는, 하나의 함수인데, 함수를 통하여 컴포넌트에 우리가 준비한 특정 기능을 부여한다. 직접 만들어볼 때 까지는.. Redux 폴더 구조 React와 Redux를 사용하는 프로젝트의 폴더는 크게 action폴더와 component폴더, reducer폴더, store 폴더로 구성된다. action 폴더 action 폴더는 애플리케이션에서 사용하는 명령어(action type)와 API 통신과 같은 작업을 하는 액션 매서드(action creator)를 모아둔 폴더다. 서비스에 따라 모든 명령어와 액션 메서드를 한 곳에 모아 두거나 도메인별로 구분해 나눠 놓기도 한다. // action type(명령어) export const COMPLETE_TODO = 'COMPLETE_TODO' // action creators(액션 메서드) export function complete({complete, id}) { return { type:.. VELOPERT 리액트 강의 강좌 목록 https://velopert.com/reactjs-tutorials [React.JS] 강좌 목록 | VELOPERT.LOG velopert.com 앞으로의 공부 방향 https://velopert.com/3642 누구든지 하는 리액트 10편: 앞으로의 공부 방향 | VELOPERT.LOG 이 튜토리얼은 10편으로 이뤄진 시리즈입니다. 이전 / 다음 편을 확인하시려면 목차를 확인하세요. 리액트는 따지고보면 정말 간단한 라이브러리입니다. 지금까지 공부해본것들을 요약해보자면.. 재사용 가능한 컴포넌트를 만듭니다. props 는 부모에게서 전달받는 값입니다. state 는 자기 자신이 지니고 있는 데이터입니다. props 나 state 가 바뀌면 컴포넌트는 리렌더링 합니다. LifeCycle AP.. webpack 설정 깊이 있는 리액트 개발 환경 구축하기 https://sujinlee.me/webpack-react-tutorial/ [번역] 깊이 있는 리액트 개발 환경 구축하기 브라질 출신 풀스택 개발자인 에수 실바(Esau Silva)의 How to use Webpack with React: an in-depth tutorial 튜토리얼을 번역한 글이다. 리액트에 익숙한 경험자를 대상으로 웹팩(webpack)과 바벨(babel)을 사용해 리액트 개발 환경을 만드는 과정을 소개한다. 완성된 코드는 react-starter-boilerplate-hmr에서 확인할 수 있다. 리액트 라우터(React Router), 핫 모듈 sujinlee.me 웹팩 입문: HTML, CSS 사용하기 https://medium.com/@s.. 이전 1 2 3 다음