Juun의 개발 기록

useState란? 리액트의 useState는 함수형 컴포넌트에서 상태를 관리하기 위한 Hook 중 하나입니다. Hook은 React 16.8버전에 새로 추가되었습니다. Hook은 클래스 컴포넌트를 작성하지 않아도 state와 같은 특징들을 사용할 수 있습니다. 또한 Hook은 함수형 컴포넌트에서 상태를 지속적으로 추적하고 업데이트할 수 있도록 도와줍니다. useState를 사용하면, 컴포넌트에서 변경 가능한 상태를 정의하고, 해당 상태가 변경될 때마다 리액트가 컴포넌트를 다시 렌더링하도록 설정할 수 있습니다. useState는 다음과 같이 사용합니다 import React, { useState } from 'react'; function Example() { // useState를 사용해 "count"..

리액트를 하다보면 State와 Props에 대해 많이 나오는데 오늘은 이것에 대해 간단하게 정리해볼까 합니다. State란? 부모 컴포넌트에서 자녀 컴포넌트로 데이터를 보내는게 아닌 해당 컴포넌트 내부에서 데이터를 전달하는 방법! 예를 들어, 검색 창에 입력할때 글이 변하는 것은 state로 바꾸게 됩니다. State는 변경 가능한 mutable 값입니다. State가 변하면 re-render가 됩니다. State는 해당 컴포넌트에서 useState라는 React hooks를 통해 사용가능합니다. 간단한 코드로 설명을 하면 아래와 같습니다. import React, { useState } from 'react'; function MyComponent() { const [count, setCount] = ..

비구조화 할당이란? 리액트를 공부하다 보면 비구조화 할당이란 단어가 많이 보입니다. 비구조화 할당(Destructuring assignment)은 객체나 배열에서 데이터를 추출하여 변수나 상수로 개별적으로 할당하는 문법으로, 배열에서도 동일하게 사용할 수 있습니다. 이때 배열에서 비구조화 할당을 사용하는 것을 배열 분해 구조(Array destructuring)라고 부릅니다. 객체에서의 비구조화 할당 객체에서 비구조화 할당을 사용하면 객체의 프로퍼티를 추출하여 변수나 상수로 할당할 수 있습니다. const { 프로퍼티1, 프로퍼티2, ... } = 객체; 예를 들어 다음과 같이 객체를 생성하고, 해당 객체의 프로퍼티를 변수로 할당하는 코드를 작성할 수 있습니다. const person = { name: ..

component 란?? component 리액트는 컴포넌트 기반 아키텍처를 사용하여 UI를 구성합니다. 컴포넌트는 UI의 작은 조각을 나타내며, 다른 컴포넌트와 조합하여 복잡한 UI를 만들 수 있습니다. 이러한 컴포넌트 기반 아키텍처는 코드의 재사용성과 유지 보수성을 높여주는 장점을 가지고 있습니다. 리액트 컴포넌트는 함수형 컴포넌트와 클래스형 컴포넌트로 나눌 수 있습니다. 함수형 컴포넌트 function App() { const name = "리액트"; return {name} } export default App; 함수형 컴포넌트는 코드가 간결하고 읽기 쉽다는 장점이 있습니다. 또한, 클래스형 컴포넌트에 비해 메모리 사용량이 적고 성능이 더 우수합니다. 함수형 컴포넌트는 상태(state)를 가질 수..