즐겁게, 코드

자바스크립트 단에서 화면 사이즈를 기반으로 모바일 여부를 검사하는 useIsMobile 훅을 제작하고 있었습니다. import { useEffect, useState } from "react"; const useIsMobile = () => { const [isMobile, setIsMobile] = useState(false); const [screenWidth, setScreenWidth] = useState(0); const handleScreenResize = () => { setScreenWidth(window.innerWidth); screenWidth > 768 ? setIsMobile(false) : setIsMobile(true); }; useEffect(() => { handleScre..

TL;DR 1. 리액트에서는 중복되는 상태 업데이트를 배칭으로 처리하고 있다. 2. 기존에는 비동기 프로세스 안에서 발생하는 중복된 상태 업데이트에는 배칭을 적용하지 않았지만, 버전 18부터는 항상 배칭을 적용한다. 2013년 처음 세상에 등장한 리액트는 현재 최고의 전성기를 누리고 있고, 이제는 버전 18의 출시를 눈앞에 두고 있습니다. 버전 17에서는 내부적인 최적화 및 안정화에 초점을 맞춰 별다른 변화를 체감하지 못했지만, 현재 베타로 출시된 리액트 버전 18에서는 몇 가지 눈에 띄는 변경사항이 있는데요, 오늘은 그 중 automatic-batching 이라는 새로 추가된 성질을 소개해보려 합니다. 시작하기 전에 시작하기 전, 리액트 버전 18의 설정방법을 간단히 소개하고자 합니다. 1. 최신 버전..

자바스크립트는 정말 다양한 배열 조작 메서드를 제공하는데요, 메서드의 동작을 구분하는 여러 기준 중 하나는 바로 “원본 배열을 변경하느냐” 일 것입니다. // 1. 원본 배열은 변경되지 않는 예시 const frontEnd = ["react.js"] const backEnd = ["node.js"] const fullstack = frontEnd.concat(backEnd) // frontEnd, backEnd 원본 배열의 값은 이전과 동일합니다. console.log(fullstack) // ["react.js", "node.js"] // 2. 원본 배열이 변경되는 예시 let techStack = ["react.js"] teckStack.push("node.js") // techStack 원본 배열에..

자식 요소를 감싸는 래퍼 컴포넌트를 작성할 때 자식 요소인 children 속성의 타입을 명시해야 하는 경우가 자주 있습니다. 그런데, ReactChild, ReactElement, ReactNode 등 비슷한 이름을 갖는 타입이 너무 많은 모습이네요! 오늘은 자주 사용되는 타입 설명과 함께 어떤 상황에서 각 타입을 사용할 수 있을지 간단히 알아보도록 하겠습니다. const App = () => { return ( {/* 과연 children 요소의 타입은 무엇일까요? */} Hello, world! ); }; type WrapperProp = { // children: React.ReactChild; // children: React.ReactElement; // children: JSX.Element..

오늘은 Tailwind CSS의 실험적인 기능 중 하나인 JIT(Just-In-Time) 모드를 가볍게 소개해보려 합니다. function App() { return ( “테일윈드 CSS는 커스터마이징하기도 쉽고, 빌드 결과물도 가볍고, 무엇보다 엄청나게 빠른 속도로 스타일링이 가능하다는 장점이 있습니다.” Chanmin, Kim 프론트엔드 개발자 인턴 ); } export default App; 테일윈드 CSS를 적용하면 클래스명이 조금 난잡해진다는 댓가를 치르는 대신 엄청난 생산성을 얻게 됩니다. 다만 이렇게 예약된 클래스명을 통해 스타일을 지정하다 보니, 원하는 스타일이 클래스명으로 예약되어 있지 않은 경우에는 별도의 CSS 파일을 생성하거나, 테일윈드 설정 파일을 수정하거나, Emotion 등 C..

귀여운 고양이들이 지그재그로 위치한 모습입니다! flexbox가 적용된 컨테이너 안에 left-, right- 요소가 있고, 각 요소 안에 사진과 설명이 적절히 들어간 레이아웃입니다. 1번 고양이입니다. 2번 고양이입니다. 3번 고양이입니다. img { width: 200px; } .flex-container { display: flex; align-items: center; justify-content: space-between; padding: 10px; border: 1px solid #cdcdcd; } @media (max-width: 768px) { .flex-container { display: flex; flex-direction: column; } } css는 컨테이너에 flex 속성을 적..

지난 글에서는 리코일이 무엇인지와 리코일과 기존 상태관리 방법의 차이를 간단하게 소개했는데요, 이번 글에서는 실제로 동작하는 여러 앱에서 리코일을 사용해 상태를 관리해보겠습니다. 리코일 설치하기 CRA로 프로젝트를 구성했다고 가정하고, 리코일을 설치해 보겠습니다. // yarn yarn add recoil // npm npm i recoil 리덕스를 사용할 때는 redux, react-redux, 경우에 따라서는 redux-thunk, redux-saga까지 설치해야 했지만, 이제는 리코일만 설치하면 됩니다! 리코일 루트 컴포넌트 정의하기 리코일을 사용하기 이전, 리코일로 전역 상태를 관리할 범위를 컴포넌트로 감싸줍니다. Tip. 는 리덕스나 컨텍스트의 Provider와 같은 역할을 합니다. import..