"I'm not a fan of develop!"

프론트/리액트 (17)

뒤로가기 무한 증식 없애기 #리액트 2차 개인과제 리팩토링

간단한 과제 소개포켓몬 데이터 목록을 이용하여 나만의 포켓몬을 추가/삭제할 수 있다. 포켓몬 상세 정보를 확인할 수 있다.상세페이지에서 뒤로가기가 무한 증식되는 걸 변경했다. 위에 보이는 사진에서 사진을 누르면 포켓몬 상세페이지로 이동한다. 상세페이지는 이렇게 생겼다. (css 아직 하기 전인데 사진 올리기 창피하네요)사진에서 보이는 이전, 다음 포켓몬 버튼을 누르면 다음 넘버를 가진 포켓몬의 상세페이지로 이동된다. 기존 구현은 `Router` 를 사용해서 `/Detail/:id`와 같은 경로로 이동하도록 구현했다. 이렇게 구현하니 포켓몬 몇 개 구경하면 상세페이지에서 갇혀버린다...  따라서 너무 귀찮았지만 `Router` 설정부터 `navigate` 등등...정말 귀찮았지만 변경하기로 큰 결심을 했다..

더 읽기

[커스텀 훅] 수납장으로 훅 정리하기 #리액트 2차 개인과제 리팩토링

간단한 과제 소개포켓몬 데이터 목록을 이용하여 나만의 포켓몬을 추가/삭제할 수 있다. 포켓몬 상세 정보를 확인할 수 있다.이번 리팩토링은 컴포넌트에서 작업할때 훅 관련 로직이 자꾸 눈에 밟혀 훅 전용 수납장으로 치우기로 했다. 새로 만든 커스텀 훅을 어딘가에서 재사용될까 싶긴 하지만 그냥 해봤다는 것에 의미를 두기로 했다.   커스텀 훅이란 각종 리액트 훅들을 취향대로 정의해놓고 사용하는 것이다. . . (블로그 홍보하기) 그래서 무슨 훅을 만들었냐면 저기 위에 포켓볼 사진 있는 곳이 대시보드 영역인데 `overflow-scroll` 속성을 줘서 안보이는 부분까지 가로로 요소들이 꽉 들어가 있다. 그리고 마우스 휠로 가로 스크롤을 구현하고자 `useRef` , `useEffect` 를 사용했는데 별 기능..

더 읽기

[React] use어쩌구들 깔끔하게 사용하기 #커스텀 훅

💡 Custom Hook커스텀 훅이란 각종 리액트 훅들을 취향대로 정의해놓고 사용하는 것이다. 보통은 `use어쩌구.js` 같은 js파일을 생성하고 그 안에 필요한 로직같은걸 작성한 다음 컴포넌트에서 필요한 데이터만 반환해주는 식이다.  📍 왜 씀?여러 컴포넌트에서 같은 데이터, 같은 로직이 필요할 때 쓴다. 하나의 파일에서 정의만 해두면 여러 컴포넌트에서 재사용할 수 있다. 그리고 코드가 깔끔해진다(라는 느낌을 받을 수 있다.) 왜 깔끔해지는 느낌을 받냐면 분리해둔 `use어쩌구.js`파일은 한 번 정의해두면 다시 열어 볼 일이 별로 없다. 다시 말해 눈에 안보인다는 뜻이다. 눈에만 안보이면 어쨋든 깔끔해 보일 수 있다. 약간 서랍같은 친구인데 서랍이 닫혀있으면 안의 상태가 어찌 되었건 편안하지 않..

더 읽기

[React] styled-components {css} #조건에 따른 CSS 처리

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..

더 읽기

[React] 전역 상태관리 #redux

💡 전역 상태관리 - Redux📍 useState의 불편함 컴포넌트의 state를 공유할 때 Props를 통해 부모 컴포넌트에서 자식 컴포넌트로 전달하게 된다. 아니 그래야만 한다. 1. 반드시 부모-자식 관계가 되어야 공유가 가능하다.2. prop drilling이 발생하고 불필요한 코드가 생긴다. (props를 받아서 전달만 하는 컴포넌트는 불필요하다.)3. 자식 컴포넌트에서 부모 컴포넌트로 값을 보낼 수 없다. 📍 리덕스를 사용하면state를 공유할 때 부모-자식 관계가 아니어도 된다중간에 의미 없는 props의 전달 과정이 없어도 된다. 자식 컴포넌트에서 만든 state를 부모 컴포넌트에서 사용이 가능하다. 💡 Global state & Local StateGlobal state는 redu..

더 읽기

[React] props 계속 전달하기 귀찮을 때 #useContext

일반적으로 부모 컴포넌트에서 자식 컴포넌트로 데이터를 전달할 때 `props`를 사용해서 전달한다. 하지만 깊이가 깊어질 수록 prop drilling이 발생한다. 쉽게 말해 드릴로 뚫어버리듯 prop의 전달이 너무 깊어진다는 의미이다.  아래 발로 만든 구조를 보자.  대충 저런 구조에서 더 타고 내려가면 어떤 문제가 발생할까? 사실 아무런 문제도 발생하지 않는다. 물론 컴퓨터가 해석 할 때 아무 문제가 생기지 않는다는 것이고, 사람이 인지하는데는 어려움이 발생할 수 있다.  문제점깊이가 깊어질수록 어떤 컴포넌트로부터 props가 내려왔는지 파악이 어렵다. 특정 컴포넌트에서 오류가 발생할 경우 디버깅이 어려워진다. prop drilling의 예시 코드를 작성해보고 후에 context를 사용해서 리팩토링..

더 읽기

[React] useRef의 몇 가지 특징들 #useState vs useRef

💡값이 변경될 때 리-렌더링useState와 useRef의 가장 큰 차이는 값이 변경될 때 렌더링의 발생 유무이다. State는 값이 변경될 때마다 리렌더링이 되지만 Ref는 리렌더링이 되지 않는다. Ref는 리렌더링이 될 때 변경된 값을 확인할 수 있다.  따라서 컴포넌트에 엄청 자주 변경되는 값이 있을 때, 그 값에 의해 리렌더링될 필요는 없을 때 사용하면 좋다. 일반 변수와도 닮은 것 같지만 리렌더링이 될 때 컴포넌트 자체가 다시 호출되게 되고 이 때 일반 변수는 값이 다시 초기화 되지만 Ref는 컴포넌트의 전생애주기(마운트 ~ 언마운트)를 통해 유지되기 때문에 컴포넌트가 리렌더링 되어도 값을 유지한다.   💡 DOM 요소에 접근할 때자바스크립트에서 id나 class등으로 DOM 요소에 접근하는..

더 읽기

[React+JS] 헷갈리는 `중첩 객체` 구조분해할당

리액트는 자식 컴포넌트에 값을 전달할 때 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`

react에서는 각종 컴포넌트를 미리 만들어 놓고 필요에 의해 호출하여 사용한다. 반복되는 컴포넌트는 반복문을 통해 호출하게 되는데 이 때 각 컴포넌트에 `key` 를 지정할 수가 있다.  💡 keykey는 반복문으로 호출되는 컴포넌트에 전달(포함)시키는 값이다. 리스트로 이루어진 컴포넌트 중에서 값의 변화가 이루어지는 컴포넌트를 식별하기 위해서 사용한다.즉, `key`가 없으면 컴포넌트를 순회하여 변화를 감지한 이후에 리렌더링을 하게 되고 성능적으로 좋지 않다.각각의 컴포넌트에 고유한 값을 전달해야 한다. `key`를 직접 명시하지 않으면 자동으로 인덱스를 `key` 로 사용한다.

더 읽기

[React] 일반형 & 함수형 업데이트 #useState

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` 을 ..

더 읽기

[React] 컴포넌트의 변화에 따른 작업 처리 #useEffect()

💡 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 ..

더 읽기

[React] Lazy initialization 지연 초기화 #useState 초기값

💡 지연 초기화기본적으로는 useState에 초기값을 넣어주게 되면 state가 뭐 어떻게 변하건 초기값을 계속 불러오게 된다. 하지만 Lazy initialzation 기법(?) 을 사용하면 처음 렌더링 될 때만 호출(동작)된다.   원래 쓰던 방법const getName = () => { /* 막 api 불러오고 */ /* 막 데이터 가공하고 */ /* 막 데이터 정렬하고 */ /* 기타 무거운 코드들 */ return 전국민이름모음}const [name, setName] = useState(getName());초기값으로 getName()에서 반환된 값을 사용한다. 가벼운 작업이나, 상수값 같은 것들은 그냥 써도 되겠지만 혹시 저렇게 작업량이 많고 무거운 값을 반환받아 사용될 경우 성능적인..

더 읽기

Copyright © 프론트장인(진) All Rights Reserved

Designed by JB FACTORY

티스토리툴바