React
-
모던 리액트 Deep dive - 클래스, 클로져React 2024. 2. 18. 14:04
1. 클래스란? - 특정한 객체를 만들기 위한 일종의 템플릿. 특정한 형태의 객체를 반복적으로 만들기 위해 사용되는 것이 바로 클래스. 다음은 클래스 예제이다. (우아한테크코스 로또 미션 중 일부) 1-1 정적 메서드(static)은 클래스에서 직접 호출 할 수 있다. const { ErrorMessage } = require("./Error"); class Validate { static purchase(callback) { return (amount) => { if (Number(amount) % 1000 !== 0) { throw new Error(ErrorMessage.IS_CORRECT_AMOUNT); } if (isNaN(amount)) { throw new Error(ErrorMessage...
-
모던 리액트 Deep Dive - 리액트 개발을 위해 꼭 알아야 할 JSReact 2024. 2. 12. 18:32
1. 자바스크립트의 데이터 타입 1) 원시 타입 - boolean 0, -0, 0n, 0x0n은 부호나 소수점 유무에 상관없이 falsy한 값 NaN은 Number타입 - null type of null === 'object' // true? typeof로 null을 확인했을 때 해당 타입이 아닌 object가 반환. 명시적으로 비어 있음을 나타내는 값 - undefined 선언됐지만 할당되지 않은 값. - number - string 백틱을 사용해서 표현한 문자열을 템플릿 리터럴이라고 함. 같은 문자열을 반환하지만 줄바꿈이 가능하고, 문자열 내부에 표현식을 쓸 수 있음. - symbol 심볼은 심볼함수를 이용해서만 만들 수 있음. - bigint number가 다룰 수 있는 숫자 크기의 제한을 극복하기..
-
Funnel에서의 상태관리 고민React 2024. 1. 30. 17:03
현재 구조는 최상위 컴포넌트인 OnboardingPage에서 모든 상태를 useState를 통해 관리하고 있다. const OnBoardingPage = () => { const { Funnel, setStep } = useFunnel(ONBOARDING_FORM_STEP, ONBOARDING_FORM_STEP[0]); const [gifteeName, setGifteeName] = useState(''); const [imageUrl, setImageUrl] = useState(''); const [deliveryDate, setDeliveryDate] = useState(''); const [tournamentStartDate, setTournamentStartDate] = useState(''); ..
-
왕초보가 작성한 토스 퍼널의 아주 기초적인 사용법React 2024. 1. 19. 21:07
퍼널(Funnel) 이번 웹잼에서 온보딩 파트를 맡게 되었고, 어떤식으로 구현해야 할지 고민하였는데, 처음에 생각했던 방식은, ‘다음’버튼을 클릭했을 때 navigate로 이동시키는 방법이었다. 하지만 총 6단계로 이루어진 온보딩 파트였고, 공통으로 쓰이는 상태가 있을 것 같다고 판단했다. 이를 위해서 SOPT 웹파트 3주차 리액트 과제를 떠올렸다. 당시 나는 step에 따른 조건부 렌더링 방식을 선택했었고, 많은 props drilling이 발생하긴 했지만 조금 고도화 한다면 충분히 좋은 방법이라 생각했다. 그 즈음 예전에 우리 파트 OB분에게 지나가듯이 들었던 퍼널이 생각나서 검색 후 모든 자료를 뒤져보면서 공부하였다. 왜 이름이 퍼널일까? 퍼널의 뜻은 ‘깔때기’이다. 유저들의 잔존률이 깔때기 처럼,..
-
리액트에서 .env 사용하기 (카카오 로그인)React 2023. 11. 6. 19:30
팀 프로젝트 중 카카오 로그인 기능을 구현하려고 하던 중, env파일에 대해서 처음 알게되어서 어떻게 쓰는 것인지 등 공유하려고 한다. 먼저 env란 뭘까? 쉽게 얘기하면 깃허브에 올리면 안되는 것들을 환경변수를 정의하여 변수로 받아오는 것으로 생각하면 되겠다. 이 env파일은 항상 최상위 루트에 있어야 한다. 또한 리액트(CRA환경) 에서는 REACT_APP을 변수명 맨 처음에 꼭 넣어주어야 한다. 그리고 process.env로 전역에서 접근가능하다. const CLIENT_ID = process.env.REACT_APP_REST_API_KEY; const REDIRECT_URI = process.env.REACT_APP_REDIRECT_URL; 주의할 점은 절대 쌍따옴표나 따옴표를 붙이지 말 것!! ..
-
[React] to do app 만들기React 2023. 7. 11. 19:27
가장 기초적이라 할 수 있는 to do app을 만들어보자. 만들면서 해멨던 부분을 위주로 기록해보겠다. 우선적으로 App.js 전체 코드부터 살펴보자. import React, { useEffect, useState } from "react"; import List from "./components/List"; import Form from "./components/Form"; const initialTodoData = localStorage.getItem("todoData") ? JSON.parse(localStorage.getItem("todoData")) : []; export default function App() { const [todoData, setTodoData] = useState(i..