개발 여행 개발 여행

Front-end

• [React] React로 범용적인 재사용 컴포넌트 만들어보기

  Front-end/React 2020. 11. 30. 12:52

  컴포넌트 컴포넌트란 독립적인 단위모듈인데요, 이는 말 그대로 독립적으로 사용(수행)할 수 있다는 것을 말합니다. 그런데 뭔가 독립적이란 것이 조금 추상적이라고 느껴지시지 않나요? 그만큼 컴포넌트를 나누는 일은 이 독립이라는 단어를 어떻게 해석하느냐에 따라서 방법이 바뀌게 됩니다. 리액트와 같은 SPA 라이브러리 혹은 프레임워크를 사용하다보면 컴포넌트들을 만들게 되는데요 이렇게 만든 컴포넌트들은 특정 화면에서 사용이 될 것입니다. 이 컴포넌트들은 규모가 작은 애플리케이션에서는 적을 수 있지만 규모가 커질수록 컴포넌트의 갯수와 크기도 비례하여 커지게 될 것입니다. 이에 따라 프론트 개발자는 아마 이런 고민들을 하게 될겁니다... "음.. 어떻게 하면 컴포넌트를 재사용 할 수 있게 개발 할 수 있을까...?"..

• Webpack으로 React 개발 환경 세팅해보기

  Front-end/React 2020. 11. 30. 12:51

  리액트 프로젝트 리액트 프로젝트를 생성하는 방법에는 몇가지가 있는데요 대표적으로 CRA(Create React App)이 있습니다. CRA를 통해 프로젝트를 생성하게 되면 개발자가 특별한 세팅을 하지 않아도 아주 쉽고 편리하게 사용할 수 있습니다. CRA로 생성된 프로젝트는 웹팩 뿐만 아니라 엄청나게 많은 기본 세팅이 되어있는데요, 처음 프로젝트를 생성하면 등장하는 README.md를 보게되면 eject라는 명령어가 있다는 것을 알 수 있습니다. 이는 리액트 내부에 숨겨져 있는 설정 파일들을 꺼내서 볼 수 있게 해주는데요 실행을 해보면 아래와 같은 디렉토리가 추가가 되고 엄청나게 많은 양의 설정 파일들이 있습니다. 이만큼 하나의 프로젝트를 세팅하기 위해 엄청나게 많은 코드와 모듈이 필요한 것을 알 수 있..

• [React] 라이프 사이클(Life-Cycle) 알아보기

  Front-end/React 2020. 11. 30. 02:39

  라이프 사이클 리액트에서 라이프 사이클은 총 3가지로 나뉘어집니다. Mount: 컴포넌트 실행 후 DOM이 생성되고 웹 브라우저에 나타나는 것 Update: 컴포넌트를 업데이트 할 때 Unmount: 컴포넌트를 DOM에서 제거할 때 리액트가 최근 v17로 업데이트가 되면서 기존에 존재했던 몇가지 메소드가 아예 없어졌기도 합니다.(componentWillMount, componentWillUpdate, componentWillReceiveProps) 단계별로 하나씩 살펴보겠습니다. Mount DOM이 생성된 후 웹 브라우저에 최종적으로 나타나는 것을 Mount라고 합니다. 이 때 호출되는 메소드는 아래 순서대로 작동합니다. 컴포넌트 생성 constuctor: 컴포넌트 생성시 호출되는 생성자 getDeriv..

• [React] state 알아보기

  Front-end/React 2020. 11. 30. 00:59

  State state는 상태라는 뜻을 가지고 있습니다. 컴포넌트에서 상태는 컴포넌트가 살아있는 동안 변화가 가능한 객체입니다. props와 헷갈릴 수도 있지만 명확히 구분하자면 props는 탑다운 방식으로 내려온 읽기 전용의 데이터의 느낌이라면, state는 컴포넌트가 소유하고 있는 고유의 값이라고 보면 될 것 같습니다. 선언하기 import React from 'react'; class MyComponent extends React.Component { constructor(props) { super(props); this.state = { number: 0, }; } render() { return ( { this.setState({ number: this.state.number + 1, }); }}..

• [React] useReducer Hooks 알아보기

  Front-end/React 2020. 11. 29. 23:56

  useReducer useState처럼 상태를 업데이트할 수 있습니다. 차이점으로는 useState는 다음 상태를 직접 지정하지만, useReducer는 액션이라는 객체를 기반으로 상태를 바꾸어줍니다. useReducer 선언하기 import React, { useReducer } from "react"; const [number, dispatch] = useReducer(reducer, 0); number는 현재 상태값, dispatch는 액션을 발생시키며 reducer에는 함수를, 0에는 초기값을 나타냅니다. useReducer 사용하기 useReducer(function, dependencies); function에는 실행할 함수를, dependencies에는 의존할 값을 나타냅니다. functio..

• [React] useCallback Hooks 알아보기

  Front-end/React 2020. 11. 29. 23:54

  useCallback 이전에 만들었던 함수를 재사용 할 때 사용합니다. useMemo와 비슷하지만 함수를 위한 Hook입니다. useCallback 선언하기 import React, { useCallback } from "react"; useCallback 사용하기 useCallback(function, dependencies); function에는 실행할 함수를, dependencies에는 의존할 값을 나타냅니다.44444444 const onChange = useCallback( (e) => { const { name, value } = e.target; setInputs({ ...inputs, [name]: value, }); }, [inputs] ); 위 코드는 inputs를 감지하여 변화가 일어..

• [React] useMemo Hooks 알아보기

  Front-end/React 2020. 11. 29. 23:51

  useMemo 이전에 연산된 값을 재사용 할 때, 주로 성능을 최적화 할 때 사용합니다. useMemo 선언하기 import React, { useMemo } from "react"; useMemo 사용하기 useMemo(function, dependencies); function에는 실행할 함수를, dependencies에는 의존할 값을 나타냅니다. useEffect와 구성이 똑같습니다. 만약에 유저가 활성화 상태인 경우만 찾는다고 가정하겠습니다. function countActiveUsers(users) { console.log("활성 사용자 수 세는 중....."); return users.filter((user) => user.active).length; } const count = countAc..

• [React] useRef Hooks 알아보기

  Front-end/React 2020. 11. 29. 23:48

  useRef 특정 DOM을 가져올 수 있도록 해주며, 렌더링과 관계 없는 변수를 선언할 때 사용합니다. 이번 파트는 useState에서 활용한 예제를 그대로 사용합니다. useRef 선언하기 import React, { useState, useRef } from "react"; import React, { useState, useRef } from "react"; function InputSample() { const [inputs, setInputs] = useState({ name: "", nickname: "", }); const nameInput = useRef(); const { name, nickname } = inputs; const onChange = (e) => { const { name..