💡 Suspense"`` lets you display a fallback until its children have finished loading.""``를 사용하면 자식이 로딩을 완료할 때 까지 폴백을 표시할 수 있습니다." https://react-ko.dev/reference/react/Suspense 📍 fallback로딩이 완료되지 않은 경우 실제 UI 대신 렌더링할 대체 UI이다. 어떤 React 노드를 사용해도 되지만 주로 로딩 스피너, 혹은 스켈레톤 UI 처럼 가벼운 플레이스홀더 뷰르를 사용한다. 즉, Suspense는 `children` 이 중단되면 자동으로 `fallback` 으로 전환되고, 데이터가 준비되면 다시 `children` 으로 전환된다. 💡 useQuery vs us..
💡 .env`.env` 파일은 환경 변수를 설정하기 위해 사용된다. 쉽게 말해 프로젝트 전역에서 참조할 수 있는 값들을 모아놓은 파일이라고 생각하면 된다. 여러가지 목적이 있겠지만 가장 큰 2가지 이유는 다음과 같다. 1. 민감한 데이터를 보관한다.작업자이외의 사람들은 `.env`의 값들을 확인할 수 없다. (`.gitignore`필수 설정) 2. 프로젝트 환경에 맞게 데이터 설정 가능개발환경, 로컬환경, 테스트, 배포.. 등의 환경마다 값을 다르게 사용할 수 있게 된다.예를 들어 개발 환경에서는 어떤 데이터들을 불러올 때 더미데이터를 불러오는 api를 사용하고, 배포할 때는 실제 데이터의 api를 사용한다고 가정. 원래라면 api 주소값을 할당한 모든 부분을 수정해야 하지만 `.env`를 잘 사용하..
간단한 과제 소개포켓몬 데이터 목록을 이용하여 나만의 포켓몬을 추가/삭제할 수 있다. 포켓몬 상세 정보를 확인할 수 있다.상세페이지에서 뒤로가기가 무한 증식되는 걸 변경했다. 위에 보이는 사진에서 사진을 누르면 포켓몬 상세페이지로 이동한다. 상세페이지는 이렇게 생겼다. (css 아직 하기 전인데 사진 올리기 창피하네요)사진에서 보이는 이전, 다음 포켓몬 버튼을 누르면 다음 넘버를 가진 포켓몬의 상세페이지로 이동된다. 기존 구현은 `Router` 를 사용해서 `/Detail/:id`와 같은 경로로 이동하도록 구현했다. 이렇게 구현하니 포켓몬 몇 개 구경하면 상세페이지에서 갇혀버린다... 따라서 너무 귀찮았지만 `Router` 설정부터 `navigate` 등등...정말 귀찮았지만 변경하기로 큰 결심을 했다..
간단한 과제 소개포켓몬 데이터 목록을 이용하여 나만의 포켓몬을 추가/삭제할 수 있다. 포켓몬 상세 정보를 확인할 수 있다.이번 리팩토링은 컴포넌트에서 작업할때 훅 관련 로직이 자꾸 눈에 밟혀 훅 전용 수납장으로 치우기로 했다. 새로 만든 커스텀 훅을 어딘가에서 재사용될까 싶긴 하지만 그냥 해봤다는 것에 의미를 두기로 했다. 커스텀 훅이란 각종 리액트 훅들을 취향대로 정의해놓고 사용하는 것이다. . . (블로그 홍보하기) 그래서 무슨 훅을 만들었냐면 저기 위에 포켓볼 사진 있는 곳이 대시보드 영역인데 `overflow-scroll` 속성을 줘서 안보이는 부분까지 가로로 요소들이 꽉 들어가 있다. 그리고 마우스 휠로 가로 스크롤을 구현하고자 `useRef` , `useEffect` 를 사용했는데 별 기능..
💡 Custom Hook커스텀 훅이란 각종 리액트 훅들을 취향대로 정의해놓고 사용하는 것이다. 보통은 `use어쩌구.js` 같은 js파일을 생성하고 그 안에 필요한 로직같은걸 작성한 다음 컴포넌트에서 필요한 데이터만 반환해주는 식이다. 📍 왜 씀?여러 컴포넌트에서 같은 데이터, 같은 로직이 필요할 때 쓴다. 하나의 파일에서 정의만 해두면 여러 컴포넌트에서 재사용할 수 있다. 그리고 코드가 깔끔해진다(라는 느낌을 받을 수 있다.) 왜 깔끔해지는 느낌을 받냐면 분리해둔 `use어쩌구.js`파일은 한 번 정의해두면 다시 열어 볼 일이 별로 없다. 다시 말해 눈에 안보인다는 뜻이다. 눈에만 안보이면 어쨋든 깔끔해 보일 수 있다. 약간 서랍같은 친구인데 서랍이 닫혀있으면 안의 상태가 어찌 되었건 편안하지 않..
styled-components로 조건에 맞게 스타일링을 하면 개인적으로 가독성이 많이 떨어진다고 생각한다. 항상 불편함을 느꼈지만 모른채하고 그냥 쓰고 있었는데 어쩌다보니 알게된 {css} 라이브러리를 써보고 마음이 편안해져버렸다.. 💡 일단 코드부터 바로import styled, { css } from 'styled-components';const COLORS = { warn: css` background-color: red; color: white; `, default: css` background-color: black; color: white; `,};const StBtn = styled.button` ${(props) => props.colorStyle} b..
💡 전역 상태관리 - Redux📍 useState의 불편함 컴포넌트의 state를 공유할 때 Props를 통해 부모 컴포넌트에서 자식 컴포넌트로 전달하게 된다. 아니 그래야만 한다. 1. 반드시 부모-자식 관계가 되어야 공유가 가능하다.2. prop drilling이 발생하고 불필요한 코드가 생긴다. (props를 받아서 전달만 하는 컴포넌트는 불필요하다.)3. 자식 컴포넌트에서 부모 컴포넌트로 값을 보낼 수 없다. 📍 리덕스를 사용하면state를 공유할 때 부모-자식 관계가 아니어도 된다중간에 의미 없는 props의 전달 과정이 없어도 된다. 자식 컴포넌트에서 만든 state를 부모 컴포넌트에서 사용이 가능하다. 💡 Global state & Local StateGlobal state는 redu..
일반적으로 부모 컴포넌트에서 자식 컴포넌트로 데이터를 전달할 때 `props`를 사용해서 전달한다. 하지만 깊이가 깊어질 수록 prop drilling이 발생한다. 쉽게 말해 드릴로 뚫어버리듯 prop의 전달이 너무 깊어진다는 의미이다. 아래 발로 만든 구조를 보자. 대충 저런 구조에서 더 타고 내려가면 어떤 문제가 발생할까? 사실 아무런 문제도 발생하지 않는다. 물론 컴퓨터가 해석 할 때 아무 문제가 생기지 않는다는 것이고, 사람이 인지하는데는 어려움이 발생할 수 있다. 문제점깊이가 깊어질수록 어떤 컴포넌트로부터 props가 내려왔는지 파악이 어렵다. 특정 컴포넌트에서 오류가 발생할 경우 디버깅이 어려워진다. prop drilling의 예시 코드를 작성해보고 후에 context를 사용해서 리팩토링..
💡값이 변경될 때 리-렌더링useState와 useRef의 가장 큰 차이는 값이 변경될 때 렌더링의 발생 유무이다. State는 값이 변경될 때마다 리렌더링이 되지만 Ref는 리렌더링이 되지 않는다. Ref는 리렌더링이 될 때 변경된 값을 확인할 수 있다. 따라서 컴포넌트에 엄청 자주 변경되는 값이 있을 때, 그 값에 의해 리렌더링될 필요는 없을 때 사용하면 좋다. 일반 변수와도 닮은 것 같지만 리렌더링이 될 때 컴포넌트 자체가 다시 호출되게 되고 이 때 일반 변수는 값이 다시 초기화 되지만 Ref는 컴포넌트의 전생애주기(마운트 ~ 언마운트)를 통해 유지되기 때문에 컴포넌트가 리렌더링 되어도 값을 유지한다. 💡 DOM 요소에 접근할 때자바스크립트에서 id나 class등으로 DOM 요소에 접근하는..
리액트는 자식 컴포넌트에 값을 전달할 때 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` 을 ..