Bin's Blog

글의 시작 프로젝트 & 공부하면서 "왜 나는 React를 사용할까?"라는 질문을 스스로에게 던져보았다. 나는 파도에 휩쓸려온 물고기처럼 React가 가장 인기 있는 Front-End의 라이브러리이고, 취업하려면 알아야 한다는 이유 때문이었다. 근데 과연 이렇게 사용의 목적도 모르고 수동적인 자세를 취하는 것이 옳지 않다는 판단을 내리게 됐다. 그래서 오늘부터 React에 대해서 파고드는 시간을 가져보고 싶다. 이 과정을 통해서 내가 당연하게 생각했던 것들에 대해서 의미와 목적을 고민해 보는 시간을 통해서 깊이가 더해지고 시야가 넓어졌으면 좋겠다. React란? 리액트는 자바스크립트 프레임워크인 Angular, Vue와 달리 프레임워크가 아닌 라이브러리이다. React 공식 홈페이지에 React란 "UI(..

글의 시작 오늘 다루는 주제는 내가 실제 면접 때 질문을 받아봤던 내용이다. 요즘에는 함수형 컴포넌트가 사용하기 편해서 클래스형 컴포넌트 보다 더 많이 쓰는 추세라고 한다. 나는 프로젝트 때 함수형 컴포넌트만 다뤄봤다. 그러다 문득 단순한 고민에 빠졌다. "왜 함수형 컴포넌트를 쓰지?" 면접을 준비하고 "리액트를 다루는 기술"이라는 책을 읽게 되면서 클래스형 컴포넌트의 존재에 대해서 처음 알게 됐다. "최소 내가 사용하는 도구의 장단점이나 사용 목적에 대해서는 알아야하지 않을까?"라는 마인드라서, 이번 글을 통해 차이점을 분석하는 시간을 가져보려고 한다. Class component vs Functional component React Component 선언 방식은 크게 두 가지로 나뉜다. 하나는 클래스..

글의 시작 오늘 다루는 주제는 지난 시간에 이어서 React-Query에 대해서 계속 알아보자. 특별히, 대표적인 React-Query의 기능들에서 살펴보고자 한다. 🛠️ 대표적인 기능들 React-Query에서 data fetching을 위해 제공하는 대표적인 기능들을 살펴보자 기본적으로 GET에는 useQuery가, PUT, UPDATE, DELETE에는 useMutation이 사용된다. useQuery 첫 번째 파라미터로 unique key를 포함한 배열이 들어간다. 이후 동일한 쿼리를 불러올 때 유용하게 사용된다. useQuery는 기본적으로 3개의 인자를 받는다. 첫 번째 인자가 queryKey(필수), 두 번째 인자가 queryFn(필수), 세 번째 인자가 options(optional)이다...

글의 시작 오늘 다루는 주제는 내가 실제 프로젝트에 적용해봤던 라이브러리이다. 프로젝트에서 급하게 적용하다 보니 제대로 개념을 이해하고 파악하는 시간이 상대적으로 부족했다. React-Query를 사용해서 얻는 이점이 무엇인지 파악하고, 왜 사용해야 하는지에 대한 물음표를 해소하기 위해서 글을 남기기로 결심했다. React-Query 내용이 많다 보니 글 하나에 다 담을 수가 없어서 2편으로 나눠서 작성하려고 한다. 오늘은 React-Query의 특징에 대해서 살펴보자. 🤔 React-Query란? React-Query는 리액트 애플리케이션에서 서버 상태 가져오기, 캐싱, 동기화 및 업데이트를 보다 쉽게 다룰 수 있도록 도와주는 라이브러리이다. 클라이언트 상태와 서버 상태를 명확히 구분하기 위해 만들어졌..

🤔 Flux 패턴이란? Flux 패턴은 2014년 페이스북 F8 컨퍼런스에서 발표된 아키텍처로, Client-Side 웹 애플리케이션을 만들기 위해 사용하는 디자인 패턴이다. 등장 배경 페이스북(현 메타)은 왜 Flux 패턴이 필요했을까? 답은 대규모 애플리케이션에서 데이터 흐름을 일관성 있게 관리함으로써 프로그램의 예측 가능성을 높이기 위함이었다. 그리고 또한 MVC 패턴의 단점을 보완하기 위해서다. 먼저 MVC 패턴을 알아보자. MVC는 Model, View, Controller의 약자이다. Model에 데이터를 저장하고, Controller를 이용하여 Model 데이터를 생성 / 조회 / 수정 / 삭제(CRUD)하고, 변경된 데이터는 View에 출력되면서 사용자에게 전달되어 사용자에게 보여진다. 또..

1️⃣ UseEffect 안에 JSX 🤔 문제 UseEffect return 문 안에 JSX를 조건문을 이용해서 사용하고 싶었는데... 함수 자체가 돌아가지 않는 문제가 발생했다. 📝 원인 UseEffect에서 return 문은 오직 cleanup()함수를 이용할 때만 쓸 수 있다. 컴포넌트 렌더링을 할 때 아무런 영향을 주지 않는다. 🛠️ 해결 useEffect가 아닌 함수 안 return문에 작성해서 해결했다. 2️⃣ 비동기 호출과 UseState() && rendering 과정에서 router.push() 사용 🤔 문제 Warning: Cannot update a component (Router) while rendering a different component (RequireAuth). To l..

1️⃣ AJAX란? 👉 Asynchronous JavaScript and XML(공유 가능한 방식으로 데이터를 정의하고 지정할 수 있다. )의 약자로, 말 그대로 JavaScript와 XML을 이용한 비동기적 정보 교환 기법이다. 👉 서버에 데이터를 요청한다. 👉 서버: 데이터를 요청하면 데이터를 보내주는 프로그램 - Ex)유튜버 서버: 동영상 요청하면 진짜 보내주는 프로그램 - Ex) 웹툰 요청하면 진짜 보내주는 프로그램 👉 서버개발시 짜는 코드 - 누가 comic.naver.com으로 요청하면 웹툰 보내주세요 👉 서버에 데이터를 요청할 때 일정한 규격을 작성하자 👉 방법 (GET/POST) - 받으면 get - 보내면 post 👉 예를 들어 네이버웹툰서버한테 (comic.naver.com)으로 GET..

1.1 UseEffect - 컴포넌트의 Lifecycle(인생주기)가 존재한다. 1. 페이지 들어갔는데 보이는 순간을 페이지 장착(mounted)된다고 한다. 2. 가끔 업데이트 된다(update) - state조작시 3. 필요없으면 제거된다.(unmounted) - 다른 컴포넌트로 이동시 그래서 위의 인생주기에 간섭할 수가 있다. - 수정, 삭제, 이동할 때 특별한 기능을 구현한다. 간섭하기 위해서 useEffect()를 사용한다. Function 안에 사용하면서 mount, update시 코드 실행한다. - 언제 쓰니? 1. 실행시점이 약간 다르다.(렌더링이 다 되고 나서 실행된다) 2. 그럼 반복하거나 어려운 작업들을 Html이 렌더링이 되고 나서 실행하니까 조금 더 효율적이다. 3. 시간 오래 걸..

1. URL 파라미터로 상세페이지 만들기 - Function APP에서 detail 컴포넌트로 전송하려면 Q. detail 컴포넌트 안에 shoes라는 state를 만들면 되지 않을까? A. 그러면 나중에 수정사항이 생길 때 두 곳을 수정해야하니 불편하다. Q. detail 상품이 여러개라면 상세페이지 100개가 필요하다면? A. :URL 파라미터를 써도 된다. (이렇게하면 상세페이지를 수백만개 만들 수 있다) Q. 페이지는 여러개인데 보이는 내용이 똑같으면? A. props를 활용하면 컴포넌트 1개로 각각 다른 내용이 가능하다. {props.shoes[현재url에 입력한 숫자].title} 유저가 URL파라미터에 입력한 거 가져오려면(useparams())을 사용하자. Q. 상품의 영구번호가 0인 상품..

1. Navigate, nested routes, outlet - useNavigate() -훅(use로 시작하는 것들, 유용한 것들이 들어있는 함수) import { Routes, Route, Link, useNavigate} from "react-router-dom"; { navigate(-1) }}>Home { navigate("/detail") }}>Detail - 404 페이지 생성 // *을 쓰면 위에 만든 라우터를 제외한 모든것 - Nested Routes(route 작성 약간 간단해진다.) //(about/member), (/about/location) - Nested route 접속시엔 위에처럼 element가 2개이면 2개 보이니까 어디 보여줄지 작성해야 한다. 그래서 outlet을 사..