React- Custom Hook Custom Hook - 이름이 use 로 시작하는 자바스크립트 함수 이다. custom hook 을 사용하면 지금까지 컴포넌트 내부에 한 덩이로 결합하여 사용했던 State 와 Effect 를 분리하여 사용할 수 있다. 여러 퍼즐 조각을 끼워 맞춰 하나의 퍼즐을 완성 하듯이 React component 를 여러 Hook 을 조합하는 방식으로 개발할 수 있게 된다. 로직을 독립적인 함수로 분리함으로써 하나의 로직을 여러 곳에서 반복적으로 재사용할 수 있게 된다. React 16.8 업데이트로 Hooks 가 추가됐고, Hooks 를 통해 함수 컴포넌트에서도 state 와 effect, life cycle 등을 처리 할 수 있게 됐고, 여러기능들을 구현할 수 있었지만, 내장 hook 을 이용해 로직을 만들면 코드가 길어져서 가독성이 떨어지게 되는 경우도 있고, 만든 로직을 하나의 컴포넌트가 아닌 다른 컴포넌트에서도 사용해야 하는 경우가 발생…

React- Node.js / npm 리액트 프로젝트를 시작하기 위해선 Node.js 를 설치해야 한다. JavaScript 는 웹 브라우저에서 동작하기 위한 언어로 탄생 했다. 때문에 JS 의 실행환경인 각 브라우저마다 JS 를 해석하고 실행 할 수 있는 엔진이 있는데 , 대표적으로 구글 chrome 의 v8 엔진이 있다. 웹 개발 시장이 커지고 js 를 다룰 줄 아는 개발자가 늘어나면서, 웹 브라우저 이외의 환경에서도 js 를 이용해 개발하고자 하는 니즈가 생겨났고, 이에 탄생한 것이 구글 chrome 의 v8 엔진 기반으로 만들어진 Node.js 이다. 즉, Node.js 는 자바스크립트가 브라우저 밖에서도 동작하게 하는 자바스크립트 실행 환경이며 이는 자바스크립트의 “탈 웹” 이라고도 한다. React Application 은 웹 브라우저에서 실행되기 때문에 Node.js 와 직접적인 연관은 없지만, 리액트 이외에 프로젝트를 개발하는 데 필요한 주요 도구들 (e…

React- CRA React 는 UI 기능만 제공하기 때문에 web application 을 만드는 데 필요한 개발환경 을 직접 구축해야 하는 것들이 많다. 직접 구축하면 성능을 최적화 시킬 수 있지만 web application 구축에 필요한 패키지를 별도로 설치하고 유지보수도 해야 하는 등 신경 쓸 것이 많다. 이러한 문제를 해결하기 위해서 React 팀에서 프로젝트를 시작할 때 필요한 개발 환경을 세팅해주는 도구 (toolchain) 인 CRA ( Create React App ) 를 만들었다. CRA 를 이용하면 하나의 명령어로 React 개발환경을 구축할 수 있다. SPA ( Single Page Application ) 환경을 구축할 때는 CRA 를 통해서 React 를 시작하도록 공식문서에서도 추천 하고 있다. CRA 를 통한 프로젝트 구축 터미널에서 프로젝트를 시작하고자 하는 폴더에 진입 한다. 프로젝트를 시작하고자 하는 폴더에 있는지 확인 후, 명령…

React- 상수 데이터 페이지를 구성하다 보면 UI 구성에 필요하지만 동적으로 변하지 않아서 백엔드 API 등을 통해 가져올 필요가 없는 데이터들이 있다. 이런 데이터들을 상수 데이터로 만들어 UI 를 구성할 수 있다. 상수 데이터는 이름 그대로 변하지 않는 정적인 데이터를 의미 한다. 상수 데이터를 사용하는 이유 반복되는 UI 를 하드코딩으로 하나하나 만들어두면 코드가 길어져서 가독성에 좋지 않다. 수정이 필요할때 수정해야 하는 부분들을 찾기 힘들어 유지보수가 어렵다. 하지만 상수 데이터를 활용하면 Array.map () 메서드와 조합해서 반복되는 UI 를 보다 간결하게 표현할 수 있다. 이후 수정이 필요한 경우 레이아웃은 map 메서드에서 return 하는 jsx 부분만, 내용은 상수 데이터 부분만 수정해주면 되기 때문에 유지보수 에 좋다. 상수 데이터 활용 / 선언 중복되는 코드를 기반으로 상수 데이터를 만들 때는 우선 바뀌어 들어갈 부분을 찾아야 한다. m…

React- MOCK Data 프론트엔드 개발을 진행하다 보면, UI 구성에 필요한 백엔드 API 가 완성되지 않은 상황에서 개발을 진행해야 할 수도 있다. 이런 경우 백엔드에서 API 가 완성될 때 까지 무작정 기다리는 게 아니라, 데이터가 들어오는 상황에 대비해 의도한 대로 UI 가 구현되는지 확인해야 한다. 이때 사용되는 데이터가 MOCK (모조, 거짓) data 이다. 즉, 실제 api 에서 받아온 데이터가 아닌 프론트엔드 개발자가 필요에 의해 샘플로 만든 데이터가 바로 MOCK DATA 이다. 사용 이유 백엔드 api 가 미완성인 상황에서 mock data 를 사용하지 않는다면, 실제 data 들이 들어올 부분들을 하드코딩으로 대체하고 작업을 진행하게 된다. mock data 사용없이 개발을 진행한다면 여러 문제가 발생하게 된다. 개발이 진행됨에 따라 코드가 많이 확장된 상태이기 때문에, 백엔드 api 가 완성되고 실제 데이터를 반영하는 작업을 수행할 때 …

React-useEffect useEffect ( ) 함수는 컴포넌트가 렌더링 될 때마다 특정 작업 (Side effect) 을 실행할 수 있도록 하는 리액트 Hook 이다. Side effect 는 component 가 렌더링 된 이후에 비동기로 처리되어야 하는 부수적인 효과들을 뜻한다. 이러한 기능으로 인해 함수형 컴포넌트에서도 클래스형 컴포넌트에서 사용했던 생명주기 메서드를 사용할 수 있게 되었다. useEfect는 함수이고, 매개변수로 콜백 함수를 가진다. useEffect 에 인자로 전달하는 콜백 함수에는 특정한 side effect 를 수행 시킬 수 있다. side effect 를 발생시키는 함수를 바로 호출 하는것이 아니라 useEffect 의 인자로 전달 했다. 위와 같이 useEffect 의 인자로 전달된 콜백 함수는 곧바로 호출되는 것이 아니라 모든 렌더링이 완료된 후에 호출된다. 즉, 렌더링을 blocking 하지않고 side effect 를…

React-Props props 란 컴포넌트 속성값을 의미한다. 부모 컴포넌트로부터 전달받은 데이터를 지니고 있는 객체이다. props 를 이용해서 전달하고자 하는 어떤 값이든 ( 변수, 함수, state값, event handler 등 ..) 모두 자식 컴포넌트에 전달할 수 있다. 사용 언제 props 가 필요 할까 ? 부모 컴포넌트에서의 데이터 잔달 위 컴포넌트에서 ‘햄버거’ 라는 문자열을 food 라는 변수에 담아 관리하고 있다. food 라는 변수를 사용해 화면에 표현할 수 있다. 먼저 child 컴포넌트를 만들고 부모컴포넌트에서 child 컴포넌트를 import 한다. child 컴포넌트를 return 문 내에 넣어준다. 여기서 집중해야 할 것은 “어떤 데이터를 자식 컴포넌트로 보내주어야 하는가 ” 이다. 위 사진에서 부모 컴포넌트에는 이미 선언되어 있고, 자식 컴포넌트 에서도 필요로 하는 데이터는 바로 food 라는 변수 이다. 보내주고자 하…

React-Hook Hook 은 클래스 컴포넌트에서만 사용할 수 있었던 state (상태) 관리와 lifecycle 관리 기능을 함수 컴포넌트에서도 사용 할 수 있도록 연동 (hook in) 해주는 함수를 의미한다. 이러한 hook 들의 모음을 Hooks 라고 한다. React 는 useState 와 같은 내장 hook 을 몇 가지 제공하고 있으며, 컴포넌트 간에 상태 관련 로직을 재사용하기 위해 Hook 을 직접 만드는것 ( custom hook ) 도 가능 하다. Hook은 클래스 컴포넌트 안에서는 동작하지 않으며 오로지 함수 컴포넌트 내에서만 사용해야 한다. 사용 규칙 이 두가지 경우를 제외한 곳에서는 호출할 수 없다. 클래스 컴포넌트의 메서드 뿐만 아니라 일반 JavaScript 함수에서도 사용할 수 없다. Hook 은 항상 함수 컴포넌트 내의 최상위 ( at the top level ) 에서만 호출해야 한다. 이러한 규칙을 따르다면 해당 컴포넌트가 랜더링 될 때…

React-state, setState state state 를 사용하기 위해 ‘useState’ 함수를 import 한 후에 사용해야 한다. useState 함수는 ‘Hook’ 의 일종으로 내장되어 있는 react로 부터 가져올 수 있다. import 한 useState Hook 은 사용 규칙에 따라 컴포넌트 선언문 내에서 최상위 블록 내에서 사용 하면 된다. (return 위) useState Hook 을 사용할 때는 useState Hook 으로 부터 반환 되는 값을 ‘구조 분해 할당’ 을 통해 각각의 변수에 담아서 사용 한다. [ state, setState ] 첫 번째 요소 (state) 는 우리가 동적으로 관리하고자 하는 상태값이다. 해당 상태의 초기값은 useState hook 을 호출 할때 인자로 (defaultValue) 로 넘겨준다. 두 번째 요소 ( setState function ) 는 첫 번째 요소인 상태값을 업데이트 하는 함수 이다. sta…

React meta 에서 개발한 오픈 소스 자바스크립트 라이브러리. Web Application 의 발전 우리가 사용하는 사이트에는 보이는 것 (UI: User Interface) 과 할 수 있는 것 (UX: User Experience) 이 많다. 뿐만 아니라 문서 작성, 쇼핑, SNS, 게임 등의 기능을 웹 브라우저에서 이용할 수 있다. 이처럼 사용자가 별도의 응용 소프트웨어 (어플리케이션) 를 설치하지 않아도 웹 브라우저를 통해 응용 소프트웨어의 기능을 이용 할 수 있도록 만든 웹 서비스를 웹 어플리케이션 ( Web Application ) 이라고 한다. 이러한 이유로, 현대의 대다수 웹 서비스는 웹 페이지라는 단어보다 웹 어플리케이션이라는 단어가 많이 사용 되고 있다. 과거의 웹 페이지는 UI 가 단순하고 검색어 및 회원정보 입력, 항목 클릭 등 비교적 상호작용이 적었던거에 비해 현재의 웹 어플리케이션은 동적이고 다양한 UI 를 가지며 카테고리 hover 이벤트, 좋아…

React-Router Router.js 에 경로지정, 지정된 경로대로 컴포넌트를 화면에 그리는 방법 현재 사용하고 작업 하고있는 에디터 (VScode, 등…) 에서 터미널을 오픈 한 다음 설치가 되었다면 npm install react-router-dom 을 입력해주면 설치 할 수 있다. 설치가 되었다면 src 폴더에 index.js 파일이 위치해 있는 같은곳에 Router.js 파일 하나를 만들어 준다. Router.js 파일을 만들어야 하는 이유는 sign up 띄우거나 log in 을 띄워야한다면 index.js 에서 매번 랜더링 할 컴포넌트를 매번 수정해야 하고 컴포넌트 별로 경로 설정 또한 할 수 가 없다. Router.js 파일은 다른 파일에서 import 하기 때문에 export 가 필요하다. 만들어 놓은 컴포넌트에 대해 간략하게 설명하면 BrowserRouter 컴포넌트는 경로 변경에 대해 여러 편의기능을 제공해주는 컴포넌트인데 대표적으로 페이지가 새…

React 함수 컴포넌트의 side effect 함수 컴포넌트에서의 input 과 output 리액트에서 렌더링이랑 state 랑 proprs 를 기반으로 UI를 그려내는 행위 이다. 리액트에서 UI 를 컴포넌트 단위로 구성하고, 그 컴포넌트는 함수 컴포넌트를 이용해서 만들 수 있다.(함수의 본질은 input 을 바다서 output을 출력 하는것) 리액트의 함수 컴포넌트 본질은 무엇일까 ? 함수 컴포넌트는 state 그리고 props 를 통해서 JSX 를 만들어내는 것이 본질적인 역할이다. 즉, 함수 컴포넌트의 input 은 state 그리고 props 라고 할 수 있고, output 은 JSX 라고 할 수 있다. 이를 식으로 표현 하면, (state,props) => JSX (엄밀히 말하면 리액트의 함수 컴포넌트는 인자로 props 만을 받고 state는 인자로 받는것이 아니라 useState hook 을 통해서 꺼내오지만, 개념상으로 봤을때는 state 그리고 pro…