의진이의 개발 어린이 탈출기

이번에 금정이와 React-TS 프로젝트를 진행하면서 React Hooks에 대해 더 깊이 알아볼 필요성을 느꼈습니다.이전에도 React Hook에 대한 포스팅을 했지만, 각 훅이 무엇이고, 어떻게 동작하는지 깊이 있게 다루지는 않았던 것 같습니다. 이번 기회에 React Hooks를 하나씩 좀 더 깊이 공부하면서 정리하는 포스팅을 연재해 볼 예정입니다.  🤓 useState란 무엇인가 ??useState는 React 훅 중 하나입니다. 함수형 컴포넌트에서 상태를 관리할 수 있게 해 주고, 함수형 컴포넌트는 단순히 입력을 받아출력을 반환하는 함수라 상태라는 것을 갖지 않습니다. 그렇지만 useState를 사용하면 함수형 컴포넌트에도 상태라는 것을 추가할 수 있습니다.여기서 함수형 컴포넌트가 무엇인지 잘..

오늘은 리액트 훅에 대해서 포스팅해 보겠습니다.React에서 훅은 함수형 컴포넌트에서 상태(state)와 생명주기 기능을 사용할 수 있도록 해주는 기능입니다. 원래 React에서는 클래스 컴포넌트에서만 상태 관리와 생명주기 메서드를 사용할 수 있었지만,React 16.8부터 useStatue, useEffect 같은 훅을 사용하여 함수형 컴포넌트에서도 이를 활용 가능 하게 되었습니다. 📌 1️⃣ React Hook의 종류React Hook은 크게 기본 훅, 추가 훅, 그리고 커스텀 훅으로 나뉩니다.기본 훅useState : 컴포넌트 상태 관리(state)useEffect : 컴포넌트 생명주기 관리(side effects, API 요청 등)useContext : 전역 상태 관리 (React Context..

안녕하세요이번에 팀 프로젝트로 인해서 포스팅을 오랜만에 하게되었습니다.오늘은 이번 팀 프로젝트에서 자주사용한 Axios에 대해서 포스팅 해보겠습니다. 우선 리액트는 효율적으로 UI 구현을 위한 라이브러리입니다.리액트는 따로 내장 클래스가 존재하지 않는데, 이로 인해React에서 AJAX를 구현하기위해서는 XMLRequest를 사용하거나,다른 HTTP 클라이언트를 사용해야 합니다. 오늘은 수많은 HTTP CLIENT 라이브러리 중 axios 라이브러리에 대해 알아보겠습니다. Axios란? Axios는 브라우저와 Node.js 환경에서 모두 사용할 수 있는 HTTP 클라이언트 라이브러리로,주로 비동기 요청을 보내기 위해 사용됩니다.HTTP 요청을 매우 간단하고 직관적으로 작성할 수 있도록 도와주며, 데이터를..

리액트 컴포넌트란?리액트로 만들어진 앱을 이루는 최소한의 단위를 말합니다.컴포넌트는 MVC의 뷰를 독립적으로 구성하여 재사용을 할 수 있고, 이를 통해 새로운 컴포넌트를 쉽게 만들 수 있습니다. 컴포넌트는 데이터(props)를 입력받아 View(State) 상태에 따라 DOM Node를 출력하는 함수입니다.이름은 항상 대문자로 시작해야합니다(리액트는 소문자로 시작하는 컴포넌트를 DOM태그로 취급)UI를 재사용 가능한 개별적인 여러 조각으로 나누고, 각 조각을 개별적으로 나누어 코딩해야하고,props라고 하는 임의의 입력을 받은 후, 화면에 어떻게 표시되는지 기술하는React 엘리먼트를 반환합니다. 리액트 컴포넌트의 종류1) 함수형 컴포넌트우선 예시부터 보여드리겠습니다import React from 're..

안녕하세요 오늘은 리액트에 관하여 포스팅을 해보겠습니다.우선 리액트는 메타에서 개발한 오픈 소스 자바스크립트 라이브러리입니다.이 라이브러리는 사용자 인터페이스를 만들기 위해 사용됩니다. React는 페이스북에서 만든 프론트엔드 라이브러리로, 사용자 UI를 만들기 위한 자바스크립트 라이브러리입니다.React는 UI를 컴포넌트 단위로 만들기 위한 컴포넌트 라이브러리인데 이것을 자바스크립트를 이용해서 만듭니다.React에서 Component란 특정 기능을 담당하는 독립적인 기능 블록입니다.웹페이지의 헤더, 푸터, 네비바와 같이 HTML/CSS로 만들고, 자바스크립트로 기능을 넣은특정 UI를 따로 떼어낸 것이고,이 특정 UI를 모듈화를 시킨 것입니다. 즉 React는 HTML 요소를 컴포넌트화하고, 이 컴포넌트..