리액트
-
스타일드 컴포넌트 조건부 렌더링 활용하기React.js & Next.js 2022. 8. 26. 22:51
스타일드 컴포넌트 조건부 렌더링 활용하기 프론트엔드 개발 환경에서 CSS-in-JS 를 사용하는 가장 큰 이점 중에 하나는 property를 css 에도 적용할 수 있다는 것일 것이다. 리액트에서 className 을 통해 조건부 렌더링 하는 것보다 state 를 전달하는 것이기 때문에 맥락을 파악하기 쉽고 이해하기도 쉽다. 이렇게 CSS-in-JS 중 스타일드 컴포넌트(styled-component) 를 잘 활용하는 방법을 소개해볼까 한다. CSS-in-JS의 장점은 재사용 가능한 컴포넌트로써 스타일링 코드의 양을 줄일 수 있고, 타입스크립트의 경우 props에 대한interface를 적극적으로 활용하여 더욱 가독성이 높은 코드를 만들 수 있다. 코드 상에서는 다음과 같이 사용된다 setIsHandsU..
-
자바스크립트 프로젝트에 타입스크립트 도입하기React.js & Next.js 2022. 8. 24. 22:14
타입스크립트 설정하기 현재 우리 리액트 버전에 맞춘 17로 타입스크립트 설치를 가정하겠습니다. 프로젝트 내의 현재 버전에 맞춰 진행해주세요. 1. 타입스크립트 전역 설치 $ yarn global add typescript / npm install -g typescript 2. 타입스크립트 설정파일 생성하기 먼저 config 파일을 왜 설정해야 하는지에 대한 의문점이 있을 수 있기 때문에 이에대한 레퍼런스 블로그를 링크로 달아놓겠습니다. config 파일이란 무엇인가요? (jsconfig.json / tsconfig.json) 1) tsc 사용하기 $ npx tsc --init $ npx tsc --init 를 명령어를 실행하면서 tsconfig.json 설정을 추가할 수 있습니다. 로컬에서 tsc 를 실..
-
리액트 18 > 17 마이그레이션하기React.js & Next.js 2022. 8. 23. 22:42
목차 마이그레이션 이유 기본 패키지 구조 패키지 제거하기 패키지 설치하기 index.js 코드 변경하기 결과 레퍼런스 마이그레이션 이유 CRA(Create React App)로 패키지를 초기화하는 경우, 가장 최신 버전인 18 버전을 설치하게 된다. 현재 우리 서비스의 리액트 버전은 17이고, 사용하고 있는 라이브러리들이 18 버전에 맞춘 마이그레이션이 진행되지 않았다.. lock 파일의 라이브러리 별 의존성 문제가 있기 때문에 쉽게 버전업을 못하고 있는 상황이기 때문에, 사용하고자 하는 라이브러리가 리액트 17 버전에서도 문제가 없는지 확인하기 위해 18 버전의 리액트를 17 버전으로 마이그레이션 한다. 따라서 CRA로 빠르게 패키지를 초기화한 이유 17 버전으로 마이그레이션 한 후 사용하는 방법을 적..