data life

리액트에서 일반적으로 컴포넌트 사이에 데이터를 전달해줄 때 Props를 이용합니다. 하지만 여러 컴포넌트를 거치게 된다면?? 굉장히 불편하고 실수할 가능성도 높아지게 됩니다. Context란? 리액트 컴포넌트 간에 값을 공유할 수 있게 해주는 기능으로 주로 전역적으로 필요한 값을 다룰 때 사용합니다. 리액트는 부모 컴포넌트에서 자식 컴포넌트인 하나의 단방향으로 데이터를 보내주는데 깊이가 깊거나 여러 컴포넌트에서 사용해야 한다면 복잡해질 수 있습니다. 따라서 Context API를 사용하기 위해 createContext와 Provider, Consumer의 개념을 알아보도록 합시다! 사용방법 import { createContext } from 'react'; const context = createCon..

Glide에 대해 알아보자! Glide란? 외부 종속성이 없는 자바스크립트 ES6 슬라이더 및 캐러셀 패키지로 가볍고 유연한 장점을 가지고 있습니다. 모듈식 접근 방식을 이용하였기 때문에 프로덕션 빌드에서 많은 무게를 줄일 수 있으며 모든 기능을 포함한 무게는 ~28kb(gzip으로 압축하면 ~8kb) 정도라고 나와있네요! Rollup과 Webpack 모두 지원하며 테마와 사용자 정의 스타일을 추가해야 하는 경우 CSS와 scss를 사용하여 추가가 가능합니다. Glide 설치하기 $ npm install @glidejs/glide Glide의 스타일 구성 glide.core glide.theme Glide의 옵션 type : 움직임 종류 (slider / carousel) startAt : 특정 슬라이드..

Google OAuth2 클라이언트 ID와 비밀번호 얻기 1. Google API 콘솔 에서 google 로그인하고 들어간다. 2. 새 프로젝트를 만들거나 기존 프로젝트를 선택한다. 3. 프로젝트를 생성하거나 선택했으면 왼쪽 사이드의 'OAuth 동의 화면' 메뉴를 클릭하여 사용자 유형 중 '외부'를 선택합니다. 4. 앱 등록 수정 > 앱 정보, 앱 로고, 앱 도메인에서 정보를 모두 입력해줍니다. 5. 범위 > 범위 추가 또는 삭제 클릭하여 아래와 같이 원하는 범위를 지정해줍니다. 선택완료 시, 아래의 저장 및 계속을 클릭합니다. 6. 테스트 사용자 > ADD USERS 클릭하여 테스트할 사용자 이메일을 입력해주세요. 7. 여기까지 동의화면 설정이 끝났습니다. 이제 사용자 인증 정보 메뉴바에 들어가서 O..

이번 팀프로젝트를 진행하면서 React-query를 도입해보고자 해당 기술에 대해 알아보고자 합니다. React-Query란? 공식문서에 따르면 서버 상태 가져오기, 캐싱, 동기화 및 업데이트를 쉽게 만들어주는 라이브러리로 소개되어있으며 서버 상태를 관리하기 위한 최고의 라이브러리로 이해하면 되겠습니다. 기술적인 측면에서, - 복잡하고 많은 양의 코드를 줄여 줄 수 있습니다. - 유지 관리가 쉽고 새 기능을 쉽게 구축할 수 있습니다. 캐싱이란? 특정 데이터의 복사본을 저장하여 이후 동일한 데이터의 재접근 속도를 향상시켜준다. React-Query는 캐싱을 통해 반복적인 비동기 데이터 호출을 방지하고 서버에 대한 부하를 줄여주는 장점이 있다. (fresh Data : 최신 데이터 stale Data : 오..

이번 프로젝트 로그인/회원가입 구현을 맡으면서 사용한 react-hook-form에 대해 정리해보려고 합니다. react-hook-form은 form의 validation을 도와주는 라이브러리로 성능적으로도 더 뛰어나다고 합니다만 자세한 건 공식문서를 참고해보시는 걸로!! 📌 참고로 - 쓰면서 굉장히 유용했고 자주 이용했던 부분 위주로 설명할 예정입니다. - 공식문서는 다크모드로 보시길 추천드립니다. 1. useForm form을 만들기 위해서는 useForm을 이용해야합니다. const { register } = useForm({ mode: 'onSubmit', reValidateMode: 'onChange', defaultValues: {}, resolver: undefined, context: un..

Form과 제어 컴포넌트 Form element 폼 요소는 일반적으로 사용자의 입력을 기반으로 자신의 state를 관리하고 업데이트한다. 그러나 기본적으로 리액트에서도 state를 이용하여 변경된 상태를 setState를 통해 업데이트를 하는데 그렇다면 이 둘은 어떻게 같이 쓰이면서 관리할 수 있을까?? 💡바로 제어 컴포넌트를 이용하는 것이다. 제어 컴포넌트란? 데이터를 변경할 수 있는 모든 방법에 대해 이벤트 헨들러를 작성하고 React 컴포넌트를 통해 모든 입력 상태를 연결하는 방식으로 기존에 우리가 사용하던 handle~ 방법이라고 이해하면 된다. 그러나 이벤트 헨들러 작성이 많아지게 된다면 굉장히 번거롭기 때문에 다른 방식으로도 폼 요소의 업데이트 구현이 가능하다. export default fu..

이벤트 처리 " React element 에서 이벤트를 처리하는 방식 = DOM element 에서 이벤트를 처리하는 방식 " 리액트와 DOM 엘리먼트의 이벤트 처리 방식은 매우 유사하지만 몇가지 다른 점이 있다. // html Click // react Click 소문자가 아닌 camelCase를 사용 JSX를 사용하여 문자열이 아닌 함수로 이벤트 핸들러를 전달 다른 차이점으론 false를 반환해도 기본 동작을 방지할 수 없다. 따라서, preventDefault를 명시적으로 호출해주어야 함!! // html Submit // react function Submit(){ function handleSubmit(e){ e.preventDefault(); console.log('Success submit!..

여러 개의 컴포넌트 반복 출력하기 ✅ map 활용 return ( {cardInfos.map((info)=>( ))} ) Key 리액트가 어떤 항목을 변경, 추가, 삭제 시에 식별하는 것을 도와주는 역할을 한다. 즉, 요소의 고유성을 부여하기 위함으로 배열 내부 요소에 지정해주면된다. 대부분 데이터의 ID를 key로 부여한다. 만일 ID가 존재하지 않는다면 인덱스를 key로 사용해주도록 한다. ※ map() 함수 내부에 있는 요소에 key를 넣어주는 것이 좋음 return ( {cardInfos.map((info)=>( ))} ) 하지만, 인덱스를 사용하는 것은 리액트로부터는 권장하지 않는다. 왜냐하면 성능 저하나 state 관련 문제가 발생할 수 있기 때문인데 첫번째 리스트 두번째 리스트 첫번째 리스트..

⭐useEffect()⭐ 함수 컴포넌트 내에서 side effects를 수행하도록 해준다. export default function MyComponent() { useEffect(() => { // Code here will run after *every* render }, []); return ; } 즉, 컴포넌트가 렌더링될 때마다 React는 화면을 업데이트한 다음 내부의 코드를 실행한다. 이때, 두 가지 인자를 받는데 ✅빈배열을 넣을 경우, componentDidMount 처럼 동작하게 된다. ✅빈배열을 넣지 않을 경우, componentDidMount + componentDidUpdate 처럼 동작한다. export default function MyComponent(props) { const ..

컴포넌트가 처음으로 렌더링 될 때, DOM에 mount 컴포넌트가 DOM에서 빠졌을 때, unmount ❓생명주기를 왜 알아야하죠? 최근에는 함수 컴포넌트를 사용하고 있지만 리액트 초기엔 클래스 컴포넌트를 많이 이용하였다. 클래스 컴포넌트는 기본적으로 생명주기에 따라 메서드를 제어할 수 있게 되어있고 함수 컴포넌트는 따로 hook() 함수를 이용해 컴포넌트의 mount, unmount 되는 시점에 맞춰 제어가 가능하다. 클래스 컴포넌트를 이해하기 위해서는 생명주기를 알아야한다. 그렇다면, 먼저 함수 컴포넌트와 클래스 컴포넌트를 비교해보자. export default function Clock(){ const [date, setDate] = useState(new Date()); return( Hello!..