React-JS

React Hook Form은 왜 필요했을까? 여러 회사에서도 사용하고 있다. 그 중에 유일하게 react-hook-form을 왜 사용하는지 이유를 써놓은 회사가 있어서 가져와봤다. Toss에서는 왜 React Hook Form을 사용하는지 아래와 같이 간단하게 기재되어있다. React Hook Form 홈페이지에서는 아래와 같은 텍스트가 가장먼저 나온다. 이렇게만 설명하면 확 와닿지 않으니 예제코드를 보면 바로알 수 있다. 아래 코드는 유저이름 이메일 비밀번호를 입력할수 있는 정말 간단한 form을 react로 구현한 것이다. 더보기 'use client'; import { useState } from 'react'; type InputType = 'text' | 'email' | 'password';..

이 글은 RSC From Scratch. Part 1: Server Components 를 공부하면서 번역한 글 입니다. 총 6개의 step중 현재 step 5.1 까지 번역이 완료되었습니다. RSC From Scratch. Part 1: Server Components 우리는 지금부터 React Server Components (RSC)의 매우 단순화된 버전을 처음부터 구현해보겠습니다. 이 심도있는 탐구는 React Server Components의 이점, RSC를 사용하여 앱을 구현하는 방법 또는 이를 사용하는 framework를 구현하는 방법에 대해 설명하지 않습니다. 대신, 여기서는 완전히 처음부터 스스로 "발명"하는 과정을 안내합니다. 이것은 새로운 기술을 처음부터 구현하여 배우는 것을 좋아하는..

styled-components 공식페이지에 가면 위와 같이 써져있습니다. ES6 및 css의 장점을 사용하여 스트레스 없이 앱 스타일을 지정하라고 말입니다. 사실 JS를 사용하며 css도 같이 다루기가 무척 불편합니다. 같은 파일안에 넣으면 지저분하니 따로 css 파일을 만들면 하나하나 id와 class 이름이 겹치는지 확인해야하고 조금 더 복잡한 화면은 구현하기가 힘들어진다든지 이외에도 많은 불편함들이 있지만 이러한 불편함을 styled-components가 해결해줍니다. 그렇다면 styled-components가 무엇인지 알아봅시다. 일단은 백문의 불여일견이니 다른소리 다 집어치우고 바로 테스트를 시작해봅시다. 1. 기본 문법 우리의 목표는 아래와 같은 버튼을 만드는 것 입니다. 1) 설치하기 ( ..

처음에 react 프로젝트를 시작하면 위와 같이 세팅이 된다. 그런데 이것들이 무엇인지 잘 알지 못했다. 1. import react from 'react' 과연 이것은 무엇일까? 브라우저는 오직 3가지만 읽을 수 있다. (HTML, CSS, JavaScript) 그렇기에 우리가 React만 작성해서 브라우저한테 갔다주면 알지 못한다. 그럼 어떻게 해야할까? 맞다 React로 작성한 코드를 브라우저가 읽을 수 있도록 변환해줘야한다. 리액트에서 JSX문법을 사용하는데, 이 JSX 문법을 자바스크립트로 변환시킬 때 JSX transformer를 사용해 JSX로 작성된 React 메소드를 변환시킨다. 이때 객체인 React를 가져오기위해 import React from 'React' 를 맨 위에 작성해 Rea..

1. Hook ? hook은 함수 컴포넌트에서 React state와 생명주기 기능을 연동할 수 있게 해주는 함수이다. hook은 class안에서는 동작하지 않는다. 대신 class 없이 React를 사용할 수 있게 해주는 것이다. React는 useState 같은 내장 hook을 몇가지 제공해준다. 컴포넌트 간에 상태 관련 로직을 재사용하기 위해 hook을 직접 만드는 것도 가능하다. 2. state Hook (useState) 우리가 어떤 작업을 할 때 변수를 정말 많이 다룬다. 리액트에서도 작업을 하게 된다면 분명 변수는 필수적으로 사용하게 되어있다. 그런 변수들을 조금 더 쉽게 다룰 수 있도록 도와주는 hook이 있는데 그게 바로 state Hook이다. state Hook 즉 useState는 ..

1. Function and Class Components ? useEffect는 hook이다. 그럼 hook은 무엇인가? 그것을 알기전에 함수 컴포넌트와 클래스 컴포넌트에 대해 알아야 한다. 일단 많은 블로그들이 "함수형 컴포넌트"라고 지칭하는데 React 공식문서에 가보면 Function component라고 되어있다. 즉 "함수 컴포넌트"가 맞다. 그렇다면 왜 "함수형 컴포넌트"라는 말이 있을까? 이전에는 공식문서에서 Functional Component 즉 "함수형 컴포넌트"라고 네이밍 했는데 함수형 컴포넌트를 사용하면 함수형 프로그래밍 방법으로 할 수 있다는 혼란을 불러일으킬 수 있다고 하여 Function Component로 이름이 바뀌었다고 한다. react에는 컴포넌트를 선언하는 방법이 두..

Create react app Create React App Set up a modern web app by running one command. create-react-app.dev GitHub - facebook/create-react-app: Set up a modern web app by running one command. Set up a modern web app by running one command. Contribute to facebook/create-react-app development by creating an account on GitHub. github.com 1. Creact React app란? Creact React app은 react를 만든 페이스북이 제공하공하고 있는 ..

Props 1. props 란? properties의 줄임말이다. props는 부모 컴포넌트로부터 자식 컴포넌트로 전달된 데이터를 의미한다. props는 state와 달리 read-only 라는 것에 주의해야 한다. 2. 사용방법 먼저 예제를 보자. 이런식으로 Btn 컴포넌트에 text와 fontSize를 전달해 줄 수 있다. props 기본값 설정 방법 1 : 위 예제 처럼 'fontSize = 20' 이렇게 해 놓으면 fontSize를 넣지 않으면 저 기본값이 적용이된다. 방법 2 : defaultProps를 사용하면된다. 방법 1 같이 하지 않는다면 아래처럼 도 할 수 있다. function Btn({text, fontSize = 30, comment}) { return ( {text} {commn..

배우는 이론 Routing State Management Data Fetching Animations Typescript 사용하는 패키지 React Router styled Components Recoil Apex Charts React Hook Form Framer Motion React Query React Master Class를 수강하면서 아래의 것들을 배웠다. 암호화폐 시세 트래커 넷플릭스 클론 1. 암호화폐 시세 트래커 https://ryan-dia.github.io/React-crypto_tracker/ React App ryan-dia.github.io 해당 강의에서 react 핵심기능은 useEffect와