Web Front End

[React] Checkbox 상태관리하기

[React] Checkbox 상태관리하기 이번 포스팅에서는 React에서 체크박스 UI 를 만들고 컴포넌트 간 상태관리를 하는 방법을 예제와 함께 설명할 예정입니다. 개요 Checkbox UI 만들기 Checkbox 하나 선택 상태관리 Checkbox 전체선택 상태관리 요약 및 추가 사항 참고: 예제 코드 환경은 React, styled-component를 주로 하며, 스타일 코드는 생략되어 있습니다. 스타일 코드를 포함한 전체 프로젝트 코드는 여기에서 보실 수 있습니다. 1. Checkbox UI 만들기 Checkbox는 html의 input 태그에 타입을 체크박스로 지정해 만들 수 있습니다. 체크박스만 만든다면 아래와 같이 작성 가능합니다. 우리는 리스트와 전체선택에 체크박스를 모두 포함시켜야 합니..

[React] Context API 와 Redux 비교하기

[React] Context API 와 Redux 비교하기 리액트에서 전역 상태를 관리할 때 많이 쓰는 Context API 와 Redux를 사용법과 장단점 위주로 비교해 보겠습니다. 개요 전역 상태 관리는 언제 할까? Context API의 특징 Redux의 특징 요약 및 결론 1. 전역 상태 관리는 언제 할까? 상태 관리는 View 중심으로 이루어진 React Component에서 변하는 값에 대한 상태를 관리한다고 할 수 있습니다. 우선, React의 useState를 이용하면 지역 상태 관리를 할 수 있습니다. 이를 사용하는 컴포넌트 안 혹은 props로 전달할 때만 하위 컴포넌트에서 사용할 수 있습니다. 모든 상태 관리를 useState만을 이용하여 진행할 수도 있습니다. 하지만 여러 컴포넌트에..

[React] 환경설정 제대로 알고 하기 (without CRA) ②

[React] 환경설정 제대로 알고 하기 (without CRA) ② 지난 포스팅에서는 CRA 없이 React 기반 환경설정을 하기 위해 필요한 기본 라이브러리와 Babel을 설정해 보았습니다. 이번 포스팅에서는 webpack 설정을 개발/배포로 나눠서 하는 방법을 설명하려고 합니다. 1편 보기: https://egg-programmer.tistory.com/259 목차 webpack config와 scripts 설정 기본 라이브러리 설치 production 모드 환경설정 공통 환경설정 및 webpack merge 1. webpack config와 scripts 설정 이제 webpack.config.js 파일을 생성해 Webpack 실행 규칙을 작성하면 됩니다. 이 포스팅에서는 package.json의 ..

[카카오프로젝트100] 기술아티클 10일차

[카카오프로젝트100] 기술아티클 10일차 카카오프로젝트100 - 하루에 한 개, 기술 아티클 읽기에 참여하며 인증한 글들을 10일차씩 끊어서 블로깅합니다. 1일차: React 컴포넌트를 커스텀 훅으로 제공하기 - LINE Engineering 요약 일반적으로 체크박스가 있는 리스트를 구현한다면 컴포넌트를 분리하더라도 그에 대한 상태값은 props로 계속 전달되는 불편함이 있습니다. 커스텀 훅을 사용하게 되면 ‘컴포넌트 로직 자체를 분할하거나 재사용’할 수 있기 때문에 상태값을 관리할 때 더 간단하게 처리할 수 있게 됩니다. 느낀점 재사용 컴포넌트를 만들 때도 custom hook을 사용하면 로직을 더 분리해서 사용할 수 있을 것 같습니다. 컴포넌트를 분리할 때 불편함을 느꼈던 지점이었는데 이런 아티클을..

[카카오프로젝트100] 하루에 한 개,기술 아티클 읽기를 시작합니다.

[카카오프로젝트100] 하루에 한 개,기술 아티클 읽기를 시작합니다. 카카오 프로젝트 100은 100일동안 매일 특정 주제에 대해 실행하고 인증하며 습관을 기르게 해 주는 프로젝트입니다. 프로젝트 소개글 링크: https://project100.kakao.com/project/4623/introduce 참여 계기 카카오 프로젝트 100을 알게 된 것은 링크를 보고 나서부터였습니다. 참여하고 싶다는 생각이 막연히 있었는데, 마침 우연한 기회에 9월 6일에 모집이 마감된다는 것을 보고 빠르게 신청하게 되었습니다. 참여 방법 아래와 같이 기술 아티클 링크와 자기만의 요약을 올려서 인증할 수 있습니다. 좋은 점은, 공개적으로 올리게 되면 아티클을 다른 참여자 분들과 공유하고 소통할 수 있어서 더 자세하게 다른 ..

[React] Infinite Scroll과 Skeleton Loading 만들기

[React] Infinite Scroll과 Skeleton Loading 만들기 아무리 빠른 인터넷 환경이라고 해도 수백 개, 1,000개 이상의 데이터를 받는 데에는 시간이 오래 걸립니다. 오늘 포스팅에서는 많은 데이터를 하나의 페이지에 랜더링해야 할 때 어떻게 지연 로딩을 할 수 있는지 알아보겠습니다. 개요 Infinite Scroll과 Skeleton Loading은 무엇일까? 자바스크립트에서 지원하는 Observer API Intersection Observer를 자세히 알아 보자. Infinite Scroll 만들기 Skeleton Loading 만들기 1. Infinite Scroll과 Skeleton Loading은 무엇일까? Infinite Scroll Infinite Scroll, 즉 ..