리액트는 자식 컴포넌트에 값을 전달할 때 props라는 녀석으로 전달하게 된다. props는 전달한 인자를 통으로 묶은 객체 형태로 전달이 된다. 예시 코드// 부모// 자식const 자식 = (props) => { console.log(props) // 출력: {name: '길동', age: 30}}객체로 전달한 적이 없으나 props라는 객체 안에 내가 전달한 변수들이 들어있는것을 확인할 수 있다. 💡 객체를 하위 컴포넌트로 전달위 처럼 간단한 데이터를 보내는게 아니고 객체를 보내야 한다면 아래와 같은 구조로 props를 받아올 것이다. obj = {name:'길동', age: 30}const 자식 = (props) => { const name = props.obj.name; const ag..
react에서는 각종 컴포넌트를 미리 만들어 놓고 필요에 의해 호출하여 사용한다. 반복되는 컴포넌트는 반복문을 통해 호출하게 되는데 이 때 각 컴포넌트에 `key` 를 지정할 수가 있다. 💡 keykey는 반복문으로 호출되는 컴포넌트에 전달(포함)시키는 값이다. 리스트로 이루어진 컴포넌트 중에서 값의 변화가 이루어지는 컴포넌트를 식별하기 위해서 사용한다.즉, `key`가 없으면 컴포넌트를 순회하여 변화를 감지한 이후에 리렌더링을 하게 되고 성능적으로 좋지 않다.각각의 컴포넌트에 고유한 값을 전달해야 한다. `key`를 직접 명시하지 않으면 자동으로 인덱스를 `key` 로 사용한다.
useState로 값을 업데이트 하는 방식은 일반형과 함수형 두 가지가 있다. 💡 (1) 일반형 업데이트 count 값에 +1 을 더해주는 간단한 예시 코드 const [count, setCount] = useState(0);setCount(count + 1); // 일반형많이 사용되는 방법이고 간결하다. 하지만 하나의 함수에서 여러번의 값이 변경되어야 할 때 문제가 생길 수 있다. 다음 코드를 봅시다. const [count, setCount] = useState(0);/* 어쩌구 저쩌구 코드들 */ { setCount(count + 1); setCount(count + 1); setCount(count + 1); }}>+3버튼을 한 번 클릭할 때마다 `count + 1` 을 ..
💡 useEffect()const [count, setCount] = useState(1);const handleCountUpdate = () => { setCount(count + 1);}const handleInputChange = (e) => { setName(e.target.value);}/* 대충 다른 코드들 */return ( 추가 count: {count} name: {name})`count`와 `name` 값이 이벤트에 따라 handle 함수들에 의해 업데이트되는 저런 코드가 대충 존재함. 저렇게 업데이트 되거나, 마운트(최초 렌더링)되거나, 마운트가 해제되었을 때 실행되는 것이 `useEffect()` 임 사용 예시 (1) - 모든 state의 변경에 대해 실행const ..
💡 지연 초기화기본적으로는 useState에 초기값을 넣어주게 되면 state가 뭐 어떻게 변하건 초기값을 계속 불러오게 된다. 하지만 Lazy initialzation 기법(?) 을 사용하면 처음 렌더링 될 때만 호출(동작)된다. 원래 쓰던 방법const getName = () => { /* 막 api 불러오고 */ /* 막 데이터 가공하고 */ /* 막 데이터 정렬하고 */ /* 기타 무거운 코드들 */ return 전국민이름모음}const [name, setName] = useState(getName());초기값으로 getName()에서 반환된 값을 사용한다. 가벼운 작업이나, 상수값 같은 것들은 그냥 써도 되겠지만 혹시 저렇게 작업량이 많고 무거운 값을 반환받아 사용될 경우 성능적인..
ESLint를 설치하고 React 프로젝트를 하다보면 자꾸 뭐 prop 어쩌구 거슬리게 하는 친구가 있다. 프로젝트 root경로에 있는 `eslint.config.js` 파일을 잠깐 손봐주도록 하자. 그럼 rules : { .... } 속성이 보일텐데 여기에 아래 텍스트만 하나 추가해주면 된다 ."react/prop-types": "off" 전체 rules rules: { ...js.configs.recommended.rules, ...react.configs.recommended.rules, ...react.configs['jsx-runtime'].rules, ...reactHooks.configs.recommended.rules, 'react/j..
간략한 팀프로젝트 소개tmdb api를 이용하여 다양한 영화 정보를 가져올 수 있다. 가져온 영화 정보를 이용해서 다양한 기능과(검색, 평점, 댓글 등) 디자인 적인 부분까지 신경써서 제작한 프로젝트이다. 이전 리팩토링 과정(1) - [불어나는 API_URL 관리](2) - [중복되는 매개변수 제거](3) - [spread & rest](4) - [불어나는 코드 모듈로 분리]이번 리팩토링은 고정으로 사용되는 초기값, 상수값 등을 상수로 선언하도록 변경했다. 💡 기존 코드function getSlicedOverview(overview) { if (!overview) return "줄거리가 없는디" if (overview.length >= 80) { return `${overview.slice..
💡 공식 문서 react-toastifyReact notification made easy. Latest version: 10.0.5, last published: 5 months ago. Start using react-toastify in your project by running `npm i react-toastify`. There are 2566 other projects in the npm registry using react-toastify.www.npmjs.com 대충 저렇게 생김새와 시간 설정 등 다양하게 꾸밀 수 있는 토스트 라이브러리 공식 문서
간략한 팀프로젝트 소개tmdb api를 이용하여 다양한 영화 정보를 가져올 수 있다. 가져온 영화 정보를 이용해서 다양한 기능과(검색, 평점, 댓글 등) 디자인 적인 부분까지 신경써서 제작한 프로젝트이다. 이전 리팩토링 과정(1) - [불어나는 API_URL 관리](2) - [중복되는 매개변수 제거](3) - [spread & rest]이번 리팩토링은 firebase 모듈을 `js` 파일 하나하나에서 전부 초기화를 해주고, firebase 전체를 import해서 사용하던 부분을 정리해보았다. firebase 모듈을 초기화하고 import하는 코드만 20~30행 정도를 차지하는데 싹다 밀어버렸다. 💡 기존 구조import { initializeApp } from "https://www.gstatic...
간략한 팀프로젝트 소개tmdb api를 이용하여 다양한 영화 정보를 가져올 수 있다. 가져온 영화 정보를 이용해서 다양한 기능과(검색, 평점, 댓글 등) 디자인 적인 부분까지 신경써서 제작한 프로젝트이다. (1) - [불어나는 API_URL 관리](2) - [중복되는 매개변수 제거] 이번 리팩토링도 위의 두 개와 비슷하게 코드를 압축하고자 하는 목적으로 진행하였다. 객체 형식의 데이터를 spread 문법으로 전달하고, 받을 때 rest를 사용해서 받도록 변경하였다. 💡 기존 코드 인자로 넘기는 함수/* 어쩌구 저쩌구 로직들 ... */ const movies = data.results;const targetMovie = movies.filter(item => item.id === Number(get..
state는 원래값과 변경값이 같으면 변경 액션 자체를 하지 않는다.좀 더 정확하게 말하자면 `값` 을 비교한다기 보다 이전 값과 `메모리 주소` 가 변경되었는지를 판별한다. 💡 원시 데이터 타입 변경 예시그럼 원시 데이터 타입에 대한 state 변경 예시를 알아보도록 합시다. state 정의const [name, setName] = useState("길동")state 변경let copyName = name; // 길동 저장copyName = '이황' // coppyName 변경setName(copyName)`name`을 `copyName`에 복사하고 값을 변경했다. 그리고 `copyName` 으로 변경 코드를 작성할 경우 우리는 당연히 변경된 값을 확인할 수가 있을 것이다. 하지만 동일한 문자..
💡 git, VSCode, Node 설치git - https://git-scm.com/download/winvscode - https://code.visualstudio.com/node - https://nodejs.org/en 위의 사이트에서 다운 받고 설치하면 됨 💡 yarn 설치 (선택사항)node를 설치하면 `npm`이라는 노드의 패키지 관리자도 자동으로 설치가 된다. `yarn`은 기능적으로는 같지만 성능적인 측면에서 `npm` 보다 향상된 패키지 관리자이다. 터미널에서 아래 명령어를 입력하여 설치한다. 정리하자면 안써도 문제 없으니까 귀찮으면 패스해도 된다. 괜히 저 처럼 에러날 수도 있음 일단 설치하기전에 npm과 yarn이 뭘 해주는지부터 알아 보자. 유용한 패키지, 라이브러리 등을 ..