Stacks/React.js

[React] Hooks의 동작 원리 파악하기 (useEffect 를 중심으로)

이전에 useEffect 훅을 사용할 때 발생했던 에러 때문에 동작 원리가 궁금해 공부를 했었는데, 오늘은 그 내용을 조금 더 깊게 정리하고 기록으로 남겨 공유하고자 한다. (나를 꽤 괴롭게 했던... 카운터 컴포넌트와 그 에러에 대한 기록) 대부분의 내용은 리액트의 공식 문서 (구버전 및 신버전)을 참고하여 작성되었다. useEffect 는 무엇이고, 어떤 상황에서 사용할 수 있는가? 공식문서에 따르면, Effect 훅을 사용하면 함수형 컴포넌트에서 Side Effect를 발생시킬 수 있다고 한다. 일반적인 의미에서 Side Effect는 부수 효과, 즉 원래 목적과 다르게 외부 상태를 변경하는 등, 변화를 발생시키는 효과 (혹은 부작용) 을 의미한다. 함수형 프로그래밍의 기본 개념인 '순수 함수' 란..

React Hook Form

validation, 에러, 이벤트 등 필요한 기능을 넣어 form 을 만드는 것을 도와주는 패키지이다. 이 패키지 없이 직접 로그인 input 을 만들고 유효성 검사를 하려면 다양한 에러상황에 대해 일일히 대응해줘야한다. 관리해야할 상황도 많아진다. form에 대한 사용자 경험을 쾌적하게 제공하려면 아주 많은 경우에 대응해야하고 코드가 복잡해진다. 복잡한 코드를 간소화 하면서 form 을 쉽게 만들 수 있도록 도와주는 패키지라고 할 수 있다. 설치 및 상태 등록 npm i react-hook-form 유효성 검사를 위한 form 을 만들기 위해서는… 각 form 의 value 에 해당하는 상태와, input 의 value 변화를 추적하는 이벤트를 만든다. form 을 위한 submit 함수를 만들고, ..

[React] UseEffect로 fetch API 요청하기

import React, {useState, useEffect} from 'react'; function Test() { const [weather, setWeather] = useState(0); useEffect(() => { fetchData(); }, []); const fetchData = async () => { let response = await ( await fetch( 'http://apis.data.go.kr/1360000/VilageFcstInfoService_2.0/getUltraSrtFcst?serviceKey={API Key}&numOfRows=10&pageNo=1&base_date=20220807&base_time=0630&nx=55&ny=127&dataType=JSON', ..

[React] 리액트 Props 와 State 를 알아보자!

리액트에서 컴포넌트는 하나의 기능 단위로 구분된 코드 모음, 즉 데이터 + 화면이 같이 존재한다. 따라서 컴포넌트 내부 로직은 데이터가 변경되면 화면이 바뀌는, 데이터 중심으로 동작한다. 컴포넌트에서 외부로부터 받아오는 데이터는 props, 컴포넌트 안에서 바뀌는 데이터는 state로 구분할 수 있다. Props란 무엇인가? props란 컴포넌트의 프로퍼티(properties)를 의미한다. 자바스크립트에서 함수를 생각하면 조금 이해가 쉬운데, 함수를 전달 인자와 함께 호출하면, 호출된 함수 내부에서 그 전달 인자를 매개변수로 받아와 접근할 수 있듯이, 상위 컴포넌트에서 호출된 하위 컴포넌트에 속성 값을 전달하면, 그 속성 값 props라는 객체를 하위 컴포넌트에서 접근할 수 있다. 실제 함수를 호출할 때..

[React] SPA 는 무엇인가? / React Router 활용하기

SPA 란 무엇인가? 기존에는 웹페이지를 미리 준비해두었다가, 로딩할 때 새 페이지를 서버 측에서 전달받아와 렌더링을 했었는데 규모가 커지고 사용자와의 상호작용이 많아짐에 따라서 속도 저하의 문제가 발생했다. 이를 해결하기 위한 것이 SPA Single-Page Application이다. SPA는 페이지 전체가 아닌 바뀔 부분, 필요한 부분만 로딩한다. Header 나 Nav처럼 중복되는 요소들을 매번 불러오는 것은 불필요한 트래픽의 증가, 즉 자원의 낭비이다. 느린 반응성 때문에 쾌적한 사용자 경험을 제공하기가 어렵다. 정리하자면 필요한 데이터만 받아와서 부분을 업데이트 하는 방식으로 작동하는 웹 애플리케이션, 웹사이트를 SPA라고 한다. SPA의 단점 첫 화면의 로딩 시간이 다소 길다는 단점이 있다...

[React] 리액트는 무엇이고, 왜 리액트를 사용해야 하는가?

본 게시글은 한입 크기로 잘라 먹는 리액트 (인프런) 강의를 보고 정리한 내용입니다. 리액트란 무엇인가 node.js 기반의 자바스크립트 ui 라이브러리이다. 바닐라 자바스크립트로 구현하기 복잡한 여러 UI를 보다 쉽게 개발할 수 있도록 돕는 컴포넌트 기반의 라이브러리이다. 리액트를 사용해야하는 3가지 이유 1. 컴포넌트 기반의 UI 라이브러리 만약 엄청나게 많은 html 페이지가 존재하고, 공통적으로 들어가는 부분이 있다면 중복되는 코드가 엄청 많을 것이다. 여기에 한가지 변경사항이라도 생기게 된다면, 그 수 많은 html들을 일일이 수정해주어야 하는 문제점이 발생하고, 이렇게 하나씩 변경해주는 것을 산탄총 수술이라고 부른다. 산탄총이 엄청나게 많은 총알로 군데군데 박살내는 것에서 영감을 얻은 비유인 ..