공통 제외 예정이거나(deprecated) 제외된(obsolute) 기능, 비표준 구문은 사용하지 않는다. 항상 적용할 순 없지만 가능하면 SOLID 규칙을 따르는 것을 권장한다. SOLID (객체 지향 설계) - 위키백과, 우리 모두의 백과사전 위키백과, 우리 모두의 백과사전. --> ko.wikipedia.org 쓰나 안 쓰나 결과에 영향을 미치지 않는 코드는 최대한 제거한다. 작성된 코드엔 항상 작성된 이유가 있는 것이 좋다. JavaScript 주석 짧은 1줄 주석(// ...)은 가능하면 변수, 함수 등의 이름에 반영하는 것을 권장한다. 다른 사람의 이해를 돕기 위해 주석을 다는 것을 권장한다. 주석엔 복잡한 로직에 대한 설명 등을 담을 수 있다. 네이밍 PascalCase : type, int..
Debouncing & Throttling 자바스크립트에서는 짧은 시간에 유저 입력 등의 이벤트가 많이 일어나는 경우 화면이 끊길 수 있다. 그래서 이런 경우 특별한 최적화가 필요하다. 대표적인 예가 바로 자동완성이다. 구글에 검색어를 입력하면 한 글자가 바뀔 때마다 실시간으로 업데이트하면서 추천 검색어를 띄워줘야 한다. 만약 유저 입력 한 번에 추천 검색어 업데이트 한 번이 일어난다면 불필요한 리렌더링이 초당 수 번씩 필요할 것이다. 그래서 정작 필요한 진짜 검색어 에 대한 자동완성이 느려질 수 있다. 이런 걸 방지하기 위해 Debouncing 처리를 한다. Debouncing은 특정 함수의 호출이 너무 자주 일어나지 않도록 일정 시간 동안 함수 실행을 지연시키는 것을 말한다. const useDebo..
useLayoutEffect [리액트 공식문서] 방향성은 useEffect와 동일하지만, 모든 DOM요소의 변경 후에 동기적으로 발생한다.(useEffect는 비동기) DOM에서 레이아웃을 읽고 동기적으로 리렌더링하는 경우에 사용해야한다. useLayoutEffect의 내부에 예약된 코드들은 브라우저가 화면을 그리기 이전에 동기적으로 수행된다. [Kent C. Dodds | Remix] 기본 동작은 React가 코드를 실행하기 전에 브라우저가 DOM를 업데이트하도록 하는 것이다. 이것은 코드가 브라우저를 차단하지 않고 사용자가 DOM을 더 빨리 볼수 있도록 한다. 그래서 대부분 useEffect를 사용한다. [stack overflow] useEffect와 어느 정도 비슷하지만 React가 DOM에 업데..
ContextAPI 개요 react는 16.3 버전부터 정식적으로 ContextAPI를 지원하고 있다. 일반적으로 부모와 자식간 props를 전달해 state를 변화시키는 것과는 달리 ContextAPI는 컴포넌트 간 간격이 없다. 즉, 컴포넌트를 건너뛰고 다른 컴포넌트에서 state, function을 사용할 수 있다. 또한 redux의 많은 어려운 개념보다 context api는 Provider, Consumer, createContext 개념만 알면 적용할 수 있다. ContextAPI는 컴포넌트안에서 로그인데이터 웹 내 사용자의 설정파일 테마 언어 등 전역적으로 공유되는 데이터로 사용하면 좋다. Context React에서 props와 state는 부모 컴포넌트와 자식 컴포넌트 또는 한 컴포넌트 ..
useReducer useReducer의 역할 useReducer는 State(상태)를 관리하고 업데이트하는 Hook인 useState를 대체할 수 있는 Hook이다. 다시 말해, useReducer는 useState처럼 State를 관리하고 업데이트 할 수 있는 Hook이다. useReducer는 한 컴포넌트 내에서 State를 업데이트하는 로직 부분을 그 컴포넌트로부터 분리시키는 것을 가능하게 해준다는 것이다. 그렇게 useReducer는 State 업데이트 로직을 분리하여 컴포넌트의 외부에 작성하는 것을 가능하게 함으로써 코드의 최적화를 이루게 해준다. 아래의 두 코드를 비교해보자(State 업데이트 로직이 어디에 위치했는지 큰 구조만 살펴볼 것) useState를 사용한 경우 : 컴포넌트 내부에 ..
공부하면서 얻은 Hooks Tip! Hooks Pattern componentDidMount만 하고싶은 경우 useEffect(() => { // code }, []); 두 번째 인자(배열)의 값이 없어서 componentDidMount의 경우에만 실행된다. 첫 렌더링 때 실행된다고 생각하면 된다. componentDidUpdate만 하고싶은 경우 const mounted = useRef(false); useEffect(()=>{ if(!mounted.current){ mounted.current=true; }else{ // code } },[]) 첫 렌더링 때 실행되는 componentDidMount를 플래그변수로 막고 그 이후(componentDidUpdate)에 실행되는 코드가 실행된다. 클래스와 ..
리액트 환경 프로젝트 Github 배포 리액트 환경에서 생성한 SPA의 state, JSX, , props 같은 문법들은 브라우저가 해석할 수 없어 그대로 배포할 수 없다. 이런 문법들을 CSS JS HTML 문법으로 바꿔주는 작업이 필요하다. 이러한 작업을 컴파일(comfile) 또는 빌드(build) 라고 한다. 웹팩이 이러한 컴파일이나 빌드의 기능을 처리한다. gh-pages 설치 배포하고자 하는 react 앱의 root 에서 터미널을 통해 gh-pages 를 설치해준다. npm i gh-pages 설치가 정상적으로 완료됐다면 package.json 의 dependencies 에 gh-pages 가 생성된다. App()컴포넌트에 프로퍼티 추가 App()에서 BrowserRouter에 basename..
함수 컴포넌트 함수 컴포넌트란 함수를 기반으로 작성하는 컴포넌트를 말한다. 클래스형 컴포넌트에 비해 훨씬 짧고 직관적인 코드를 짤 수 있고, 함수 프로그래밍을 할 수 있게 해준다. 함수 컴포넌트의 Hook이라는 기능으로 클래스형 컴포넌트의 생명주기함수와 같은 기능을 사용할 수 있다. 리액트 공식 문서에서도 함수 컴포넌트 + Hook 조합을 추천하고 있다. Hooks 리액트의 Hook 은 함수 컴포넌트에서 React state와 라이프사이클 기능을 “연동(hook into)“할 수 있게 해주는 함수이다. Hook은 class 안에서는 동작하지 않고 class 없이 React를 사용할 수 있게 해준다. Hook의 개요 리액트 훅을 도입하게 된 목적은 여러가지가 있다. 컴포넌트에서 상태관련로직을 사용할 때 H..
Life Cycle 모든 리액트 컴포넌트에는 생명주기(Life Cycle)가 존재한다. 컴포넌트는 ‘생성(mounting) -> 업데이트(updating) -> 제거(unmounting)’ 의 생명주기를 갖는다. 생명주기에 맞게 어떤 작업을 처리해야 하는지에 따라 불필요한 업데이트를 방지할 수 있다. 리액트의 클래스형 컴포넌트는 라이프사이클을 활용하고, 함수형 컴포넌트는 Hook을 사용한다. Lift Cycle(생명주기) Mount(생성) 컴포넌트의 인스턴스가 생성되어, DOM에 삽입될 때 순서대로 호출된다. constructor() : 컴포넌트를 새로 만들 때마다 호출되는 클래스 생성자 메소드 this.props this.state 에 접근할 수 있으며 리액트 요소를 반환한다. setState 를 사용..
React 설치 및 프로젝트 생성 node.js 설치 안정적인 왼쪽의 LTS버전을 설치한다. React설치를 위한 npm 은 node.js 설치 시 함께 설치된다. 프로젝트용 폴더 생성 프로젝트용 폴더를 생성하고, 우클릭을 통해 터미널로 폴더를 연다. 터미널에서 npx create-react-app 프로젝트명 을 입력하고 Enter를 치면 폴더 안에 프로젝트명으로 된 폴더가 생성된다. (mac 기준 오류 발생 시 sudo npx create-react-app 프로젝트명 입력 후 Enter를 치고 비밀번호를 입력하면 된다.) npx create-react-app 프로젝트명 폴더별 역할 코드 에디터로 생성된 프로젝트 폴더를 열면 아래 사진과 같이 폴더와 파일들이 생성된다. node_modules 프로젝트 구..
