React6 React 커스텀 훅 리엑트를 배우기 시작하면서 많이듣게되는게 커스텀 훅입니다. 리엑트의 훅은 알고있는데 커스텀 훅도 들어서는 알고있지만 자세하게 사용법이나 어떤 역할을 하는지에 대해 알지 못하고 있어서 이번 기회에 자세히 알아보려고 합니다. 커스텀 훅이란? 커스텀 훅(Custom Hook)은 React 애플리케이션에서 사용자 정의로 만든 함수이며, React Hook을 활용하여 컴포넌트에서 특정 로직을 공유하고 재사용하기 위한 방법입니다. 커스텀 훅은 주로 상태 관리, 부수 효과 처리, 데이터 가져오기, 로직 추상화 등과 같은 작업을 모듈화하고 코드 재사용성을 높이기 위해 사용됩니다. 커스텀 훅 만들기 커스텀 훅을 만들 때, 이를 사용할 컴포넌트에서 인스턴스화해 필요한 데이터 또는 함수를 추출 하고 활용합니다. 이런 커스텀.. 2023. 10. 4. 프로젝트 Next.js 세팅하기 Next.js 세팅 Next.js세팅에 블로그 작성하는 이유는 Next.js 사용해서 프로젝트를 진행하기로 하였다. (참고로 일하면서 진행하다 보니 1주일은 소요되었다....) 이전에 세팅을 해본 적이 있는데 기록을 해두지 않아서 이번 세팅할 때 어려움이 있었다. 이러한 이유와 내가 잘못세팅한 부분을 다른 사용 자들과 공유하고 잘못된 점을 듣고 싶어서 블로그를 작성하게 되었다. 초반 세팅만 되어 있고 폴더 구조는 다음 블로그에서 진행할 예정이다. 사용 스택 코어: Next.js, TypeScript 상태 관리: React-Query, Recoil (차후 세팅 적용 예정) 스타일링: emotion 테스트: jest 빌드: Babel 패키지 매니저: Yarn Berry next.js에서 제공하는 간편한 초기.. 2023. 9. 14. CSR(Client-side Rendering)이란 무었인가? React를 사용하다 보면 CSR(Client-side Rendering) 에 대해 많이 듣게 된다. 관련된 내용을 알고는 있지만 설명을 할 수 없을 정도의 지식을 가지고 있어 원티드 사전 과제에 CSR에 대해 알아보는 과제가 있어 CSR에 대해 알아보고 장점과 단점을 정리 하려고 한다. CSR이란? CSR(클라이언트측 렌더링)은 웹 페이지 렌더링이 서버가 아닌 클라이언트의 웹 브라우저에서 주로 처리되는 웹 개발 접근 방식입니다. CSR에서 서버는 주로 필요한 데이터와 자산을 클라이언트에 보내고 클라이언트 측 JavaScript 프레임워크 또는 라이브러리는 HTML을 동적으로 생성하고 브라우저에서 렌더링합니다. CSR의 장점 사용자 경험 CSR을 통해 시각적으로 매력적인 대화형 사용자 인터페이스를 만들.. 2023. 6. 19. React 에 typescript 적용 후 webpack에 react-refresh 세팅하는법 webpack에 react-refresh 적용하기 1) 리엑트에 타입스크립트 적용한후 파일을 고칠떄마다 계속 빌드해줘야하는 번거로움이 있어 리엑트 핫 로딩기능을 적용하려한다. npm i -D @babel/core @types/webpack @types/webpack-dev-server ts-node fork-ts-checker-webpack-plugin babel-loader react-refresh webpack-dev-server @pmmmwh/react-refresh-webpack-plugin @types/webpack @types/webpack-dev-server @babel/core : babel-core: 웹팩용 바벨(?)이다. 터미널에서 쓸 때 babel-cli를 썼는데 이걸 웹팩에서 사용하.. 2021. 12. 10. React 에 TypeScript 적용하기 준비 단계 1. React에 TypeScript를 적용하는 이유? 컴포넌트별로 분리되어있는 리액트의 장점이 단접이 된다고 느꼇다. 상위 컴포넌트에서 하위 컴포넌트로 정보를 내려줄떄 정확하게 확인할 방법이 없기 떄문에 처음부터 어떤 값이 들어갈지 정해주는게 좋다고 느껴 타입스크립트를 적용해보자라고 생각하게 되었다. 2. TypeScript적용하는 방법 리액트 타입스크립트 패키지 설치하기 npm i react react-dom typescript 리액트와 타입스크립트를 설치해준다. 이후 tsconfig.json파일을 만들어 프로젝트를 컴파일러 옵션을 지정해준다. tsconfig.json { "compilerOptions": { "strict": true, "lib": ["es2020", "dom"], "target":.. 2021. 12. 10. React 사용하는 이유 React React 공식 홈페이지에 보게되면 "React는 사용자 인터페이스(UI)를 만들기 위한 Javascript 라이브러리"라고 나와있다. 라이브러리이기 때문에 내가 컨트롤을 가지고 React를 활용하는 것이라고 볼 수 있는데, 관점에 따라 React를 Framework라고 보기도 한다고 한다. 1. React 를 사용하는 이유 React를 사용하는 이유는 아래의 이유들 때문인거 같습니다. 1. Virtual DOM의 존재 2. 수 많은 커뮤니티 3.Component를 사용한 재사용이 가능하고 유지보수의 용이함 1. Virtual DOM 리액트를 사용하는 큰 이유중에 하나인 vurtual DOM은 기존의 DOM은 페이지가 바뀔 때마다, 새 HTML를 로드하면서 DOM전체를 바꾸게 됩니다. Vir.. 2021. 10. 30. 이전 1 다음
