THE VALUE

vscode에서 작성한 리액트 프로젝트를 github 에 배포하여 나만의 테스트 서버를 구축하는 방법. (니꼬쌤 강의를 보면서 복습해봅니다~) 선행되는 작업으로는 1. 깃헙 가입하여 계정 정보가 있어야 하며 신규 repository를 생성 후 프로젝트와 연결이 필요 2. 로컬 PC에 git 을 설치한 후 프로젝트에 git remote를 통한 깃헙 리포지토리와 연결 [ gh-pages ] github pages git으로 관리하는 로컬 프로젝트를 호스팅 서버로 배포해주는 기능 프로젝트 내 콘솔창에서 npm 명령어를 이용하여 해당 라이브러리를 설치 # npm install gh-pages [ package.json ] - 파일 수정 deploy 스크립트 추가 및 타겟 홈페이지 url (깃헙 주소) 를 매핑하..

[ useCallback ] useCallback 은 함수를 재사용할 때 사용 첫번째 인자로 넘어온 함수를, 두번째 인자로 넘어온 배열 내의 값이 변경될 때까지 저장해놓고 재사용할 수 있게 해준다. import { useEffect, useState, useCallback } from "react"; import { useParams } from "react-router-dom"; function Detail() { const [loading, setLoading] = useState(true); const [detailMovie, setDetailMovie] = useState({}); const {id} = useParams(); const getMovieDetail = useCallback(asyn..

[ router ] 브라우저 URL이 변경될 때 페이지 이동을 처리하기 위해 사용 라우터를 사용하기 위해 패키지를 먼저 설치해야 한다. [ router 종류 ] 1. BrowserRouter - 예 > thevalue.tistory.com/mypage - 일반적인 url 형태를 취하는 라우터 - 동적인 페이지에 적합 - 일반적인 프로젝트에서는 브라우저 라우터를 많이 사용 2. HashRouter - 예 > thevalue.tistory.com/#/mypage - url 의 hash를 이용한 라우터로 주소와 디테일 주소 사이에 #이 붙음 - 정적인 페이지에 적합 프로젝트 폴더 내에서 콘솔창에 아래 명령어 실행 # npm install react-router-dom@5.3.0 현재는 6.6.1 버전까지 나왔..

[ fetch ] api 형태로 데이터를 가져올 때 사용 api 호출 후 받아온 데이터를 json 형태로 출력하여 사용하게 된다. fetch('http://example.com/movies.json') .then((response) => response.json()) .then((data) => console.log(data)); [ fetch를 활용하여 코인 정보 가져오기 ] - fetch를 이용하며 코인 정보를 받아와서 select box에 리스트를 출력 - input box에 값을 입력하거나 select box의 변경 이벤트가 있을 경우 입력한 값과 코인의 값을 통해 환산 정보를 화면에 출력 import { useState, useEffect } from "react"; function App() ..

useState를 이용하여 배열 변수를 처리하는 방법에 대해서 공부 useState를 이용하여 배열을 선언하고 해당 배열에 input text 에서 입력한 값을 하나씩 추가하여 넣는 방법으로 TO DO 리스트가 화면에 출력되도록 처리해본다. ...배열명 setToDos((currentArray) => [toDo, ...currentArray]); * setToDos 와 같이 변경 함수에는 변수 및 함수를 파라미터로 지정할 수 있다. 현재 배열의 맨 앞 요소에 새로운 item(값)을 push import { useState, useEffect } from "react"; function App() { const [toDo, setToDo] = useState(""); const [toDos, setToDo..

컴포넌트에 이벤트 발생 시 / state에 변화를 감지한 경우 컴포넌트는 다시 그려짐 (리랜더링) 반복되는 랜더링을 방지하고자 사용하는 문법 - 아래 예제는 콘솔 로그가 버튼 클릭 때 마다 호출이 됨 import { useState } from "react"; function App() { const [counter, setValue] = useState(0); const onClick = () => setValue((current) => current + 1); console.log("render"); return ( {counter} Click Me!! ); } export default App; [ useEffect ] 컴포넌트가 랜더링 될 때 특정 작업을 수행하도록 설정하는 hook (리액트 문법..

앞서 진행한 CDN 라이브러리 방식이 아닌 create-react-app 명령어를 이용하여 신규 폴더를 생성 create-react-app 폴더 이름 프로젝트 내에서 컴포넌트를 분할하고 분할한 컴포넌트에 각각의 스타일링을 입히기 위해 css 파일을 분할하여 사용하는 방법에 대한 예시 [ App.js ] App.js 파일에서 사용할 css 파일을 생성 후 import className을 통해 클래스명을 지정하여 특정 요소만 스타일이 적용되도록 처리함 import Button from "./Button"; import styles from "./App.module.css"; function App() { return ( Welcome Back! ); } export default App; [ PropType..

[ Props ] 부모 컴포넌트로 부터 자식 컴포넌트로 전달되는 object 형태의 파라미터를 말하며, 공통으로 만들 버튼 등의 자식 컴포넌트를 작성한 후 파라미터로 props를 전달 받아 버튼 텍스트 등 서로 달라지는 값들만 체크하여 각각의 컴포넌트를 화면에 출력한다. [ memo ] 컴포넌트의 이벤트가 발생하거나 값이 변경되지 않는 컴포넌트에 대해서 리랜더링을 하지 않기 위해서 사용하는 문법 아래 코드의 Btn 2개의 컴포넌트 중 props 가 고정되어 있는 경우 / 변경되지 않는 경우의 2번째 컴포넌트는 이벤트 발생 후에도 리랜더링이 되지 않아서 메모리 등의 자원을 낭비하지 않을 수 있다. React.memo() [ PropTypes ] 자식 컴포넌트로 전달되는 prop의 값의 타입이 부정확한 경우..