프론트엔드/리액트(React) (12) 썸네일형 리스트형 React 스토리북(Stroybook)이란 뭘까? 스토리북이란? UI 컴포넌트를 독립적으로 분리해서 개별 관리, 테스트를 도와주는 도구 왜 사용해야하는가? 리액트 안에서도 충분히 컴포넌트로 분리해서 관리 수 있는데?! - 개별 정리 정돈이 편리하다. - 재사용성을 고려한 디자인 & 개발 가능 - 테스트가 용이하다. 그럼 여기서 드는 의문, 왜 재사용을 해야하고 재사용성이 왜 중요할까? - 불필요한 작업을 중요한다. - 안정적으로 검증된 코드를 사용할 수 있다. - 캡슐화를 통해 테스트가 쉬워진다. - 디자인 변경시 쉽게 수정이 가능하다. - 유저에게 일관된 경험을 제공한다. - 개발자와 소통이 쉬워진다. 배포의 종류 (Deploy, Release, Distribute) 와 vscode에서 Gh-Pages 로 Deploy 해보기 하나의 프로젝트가 끝난다음 Github에서 web을 Publishing 하는 방법입니다! Github을 가지고 gh-pages관련 패키지를 이용해 Deploy하는 과정입니다. 1. GitHub Repository 생성하기 2. 명령어 입력 yarn add gh-pages //# 또는 npm install gh-pages *여기서 github pages는 github에서 무료 제공하는 서비스로 코드를 올리면 그걸 웹사이트화 시켜서 전세계에 무료 배포해줌 3. 빌드 실행하기 npm run build 하고 나면 내 폴더에 build 폴더(내가 작성한 코드가 압축되어 생성됨)가 생성됩니다. 4. GitHub에 Push하기 //# package.json { "homepage": "https://username.g.. useParams()를 이용해서 파라미터를 가져오자(React Hook, react-router-dom) 리액트에서 라우터를 사용하게 되면서 파라미터 정보를 가져와서 활용해야 할 때가 있다. 여기서 사용하는 훅은 useParams 사용하기 위해서는 리액트 라우터 설치 필수이다. npm react-router-dom useParams() 사용법 1. useParams import import { useParams } from 'react-router-dom'; 2. useParams 정보를 변수에 저장 import { useParams } from 'react-router-dom'; function Detail() { const {id} = useParams(); return Detail; } export default Detail; 3. 파라미터 값 사용 import { useParams } from 're.. React-Router-Dom 기초중의 기초 정리하기 ! 리액트를 공부하다보니 리액트 라우터에 대한 공부가 꼭 필요 할 것 같아서 정리 하고자한다. Routing이란 라우팅은 기본적으로 네트워크에서 경로를 선택하는 프로세스이다. 다양한 주소 요청이 들어왔을 때 각각 맞는 곳으로 이동시켜주는 작업이라고 보면된다. React에서 React-Router를 사용하는 이유 마크업할때 a태그로 경로를 정해서 작업하는 방법도 있는데 왜 굳이? SPA(Single Page Application)사용자 경험향상의 목적으로 사용한다고 한다. a태그로 해서 클릭해 들어가면 깜빡이면서 새롭게 로딩이 발생하는데 이게 싫어서 라우팅을 통해 한페이지 안에서 해결하려고 하는것!!! 라우터 종류 1. Hash Router 2. Browser Router 따라서 React-Router-Dom.. yarn ~ react ~ stroybook 까지 설치하기 1. npm install -g yarn (yarn을 루트에 설치) 2. npx create-react-app (react 설치) 3. npx -p @storybook/cli sb init (스토리북 설치) 4. yarn storybook (yarn으로 스토리북 실행) 스토리북 실행 할 때는 npm run storybook / yarn stroybook useEffect (중요) import React, {useEffect} from 'react'; //useEffect 함수 불러오기 uesEffect(() =>{ console.log('마운트 될 때만 실행'); }, []); useEffect() - 변수, 변수를 제어하는 함수로 구성되며 변하는 값을 제어, 해당 부분의 리렌더링을 위함 - 코드의 실행시점을 관리할 수 있는 선택권을 얻는 방어막 같은 존재(state가 업데이트 될 때마다 계속 로딩되지 않기를 원할 때) - 구조에서 빈 배열일 때 최초 1회만 실행 - 값이 있을 경우 해당 값이 변할 때 실행, 무언가 변화할 때 실행, component가 파괴될때도 실행가능 - 배열안에 여러 값 넣기 가능 useEffect를 통해 언제 코드를 실행할 지 선택권을 가질 수 있다. 여러 개의 Component 렌더링 하기, map(), List의 key map() : 배열에 들어 있는 각 변수에 어떤 처리를 한 뒤, 리턴하는 것 배열에 첫번째 순서대로 각 아이템에 어떠한 연산을 진행 하고 배열로 배출시킴 기본적인 List component List의 key -> 아이템을 구분하기 위한 고유한 문자열 - 변경 추가 제거되었는지 확인하기 위해 사용함 - 특정 범위에서만 고유하면 됌(같은 list에 있는 element 사이에서만) 다양한 key값 만들기 const numbers = [1,2,3,4,5] const listItems = numbers.map((number) => {number} ); // key로 값을 사용하는 경우 const todoItems = todos.map((todo) -> {todo.text} ); // key로 id를 사용하는 경우.. 코드펜으로 리액트 실행하기 codpen을 실행 후, 이렇게 해주면 실행 ok https://codepen.io/yerim0129/pen/rNoxEvo 코드펜으로 리액트 실행하기 ... codepen.io 이전 1 2 다음
