Web/React & Next.js

React 초기 세팅, CRA 세팅하기 (Router v6 / styled-component)

node, npm 설치 CRA(Create-React-App) CRA Setting 라이브러리 설치 프로젝트 파일 , 폴더 수정 및 삭제 ESLint + Prettier node, npm 설치 node.js를 설치하면 npm도 함께 설치된다. 설치가 잘 되었는지 확인하려면 터미널을 실행시켜 node-v / npm-v 를 입력후 버전을 확인해준다. https://nodejs.org/ko/ Node.js Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine. nodejs.org CRA(Create-React-App) 💡 리액트 프로젝트를 시작하는데 필요한 개발 환경을 세팅 해주는 도구 (toolchain) 리액트는 UI 기능만 제공한..

React | 카테고리 필터링, 동적 라우팅 기능

레이아웃과 제품 컴포넌트 작업을 끝내고 한 페이지에 sub_category 별로 직접 url 을 수정하여 제품을 띄우는 것은 성공시켰다. 하지만 카테고리를 클릭할때는 카테고리에 해당하는 제품들로 업데이트가 되어야하는데 이게 한페이지에서 어떻게 일어나는지에 대한 이해가 잘 가지 않았고 이 모든게 쿼리파라미터를 이용한 동적 라우팅 기능을 사용하면 해결할 수 있다는 걸 알았다. 구현 기능 카테고리를 클릭할 때마다 url 주소를 변경하고 그 url 주소를 가져와 컴포넌트를 변경한다. ⭐Key Point onClick 이벤트 history.push() location.search() componentDidUpdate Output Code 🥕 API Data ${BASE_URL}/categories=1 더보기 { ..

React | API Data (json) 중복 map 사용 하기

1주차에 보라님이 상수 데이터로 구현했던 nav 바의 카테고리 목록을 2주차에는 백엔드에서 주는 API 데이터로 교체해야하는 상황이 오게 되었다. 보라님의 코드에서 상수데이터를 API 데이터로 교체 + 내가 구현한 카테고리별 쿼리 파라미터 주소를 link 연결하는것이 목표이다. 구현 기능 상수데이터를 API 데이터로 교체 + 내가 구현한 카테고리별 쿼리 파라미터 주소를 link 연결하기 ⭐Key Point API 데이터 분석 map 메소드 이중으로 사용하여 카테고리 이름 표시 개별 링크 연결 Output Code 🥕 API Data ${BASE_URL}/categories 더보기 { "results": [ { "category_id": 1, "category_name": "샤워", "sub_categor..

React | 상수 데이터 / mock data

상수 데이터 mock data 상수 데이터 UI 구성에 필요하지만 동적으로 변하지 않아서 백엔드 API등을 통해서 가져올 필요가 없는 정적인 데이터들을 상수 데이터로 만들어 UI를 효율적으로 구성할 수 있습니다. 상수데이터는 반복되는 UI를 상수 데이터 + Array.map( ) 함수의 조합을 이용해서 간결하게 표현할 수 있어 유지보수가 용이합니다. 상수 데이터의 활용 - 댓글 예제 상수 데이터는 별도의 JS 파일로 분리하거나, 필요한 파일 내부에서 선언해서 사용할 수 있습니다. 상수 데이터 변수는 대문자 + snake case 를 이용해서 변수의 이름을 짓는 컨벤션이 있습니다. 별도의 JS파일로 분리할 경우 export / import를 통해서 필요한 파일에서 사용합니다. JS파일은 데이터를 impor..

React | State & Props & Event

Props Props & event State Event & setState Props props는 컴포넌트의 속성값으로 부모 컴포넌트로부터 전달 받은 데이터를 지니고 있는 객체입니다. 부모 컴포넌트로부터 자식 컴포넌트에게 state의 상태값, event handler를 넘겨줄 수 있습니다. Props 객체 //Parent.js import React from 'react'; import Child from '../pages/Child/Child'; class Parent extends React.Component { constructor() { super(); this.state = { color: 'red' }; } render() { return ( Parent Component ); } } exp..

React | Component 와 생명주기

Component란 Class vs Functional Component 컴포넌트 생명주기 Component Lifecycle Component란 component란 재활용 가능한 UI 구성단위를 뜻합니다. 컴포넌트를 사용하면 반복되는 코드가 길어지는 것을 방지해주기 때문에 코드 유지보수에 좋고 해당 페이지가 어떻게 구성되어있는지 한눈에 파악하기가 좋습니다. 또한 컴포넌트는 또 다른 컴포넌트를 포함할 수 있습니다 (부모 컴포넌트 - 자식 컴포넌트) Class vs Functional Component 컴포넌트를 선언하는 방식에는 크게 class형 컴포넌트와 함수형 컴포넌트가 있습니다. Class Component import React from 'react' class Component extends R..

React | JSX 문법의 특징

JSX JSX 문법의 특징 및 준수사항 JSX const element = Hello, world!; 리액트에서는 JSX라는 독특한 문법을 가지고 있습니다. JSX는 자바스크립트와 HTML을 동시에 사용하며, HTML에 자바스크립트의 변수들을 바로 사용할 수 있는 일종의 템플릿 언어입니다. JSX 문법의 특징 1. 컴포넌트에 여러 요소가 있다면 반드시 부모 요소 하나가 감싸는 형태여야 합니다. 리액트가 사용하는 Virtual DOM 방식에서는 컴포넌트 변화를 감지할 때 효율적으로 비교하고자 컴포넌트 내부는 하나의 DOM 트리 구조로 이루어져야 한다는 규칙이 있기 때문입니다. import React from 'react'; function App(){ return( header1 header2 ) } 2...