mirabo01 님의 블로그

1. 상태 끌어올리기란 무엇인가?리액트를 사용하다 보면 여러 컴포넌트가 같은 데이터를 공유해야 하는 상황이 자주 생깁니다.예를 들어,형제 컴포넌트 간에 입력값을 공유하거나상위 컴포넌트에서 하위 여러 컴포넌트로 동일한 데이터를 전달해야 할 때가 그렇습니다.이때 가장 기본적인 접근법이 바로 상태 끌어올리기 (Lifting State Up) 입니다.즉, 공통으로 사용하는 데이터를 상위 컴포넌트의 state로 옮기고,그 데이터를 props로 하위 컴포넌트에 전달하는 방식입니다.2. 왜 상태를 끌어올려야 하는가?리액트의 데이터 흐름은 단방향(one-way) 입니다.즉, 부모 → 자식으로만 데이터가 전달됩니다.하지만 다음과 같은 상황을 생각해봅시다.function TemperatureInput({ label, va..

1. Hooks란 무엇인가?리액트 16.8 버전부터 등장한 **Hooks(훅)**은기존 클래스형 컴포넌트에서만 가능했던 기능(상태 관리, 생명주기 제어 등)을함수형 컴포넌트에서도 사용할 수 있게 해주는 기능입니다.과거에는 리액트에서 상태를 다루려면 반드시 클래스형 컴포넌트를 써야 했습니다.class Counter extends React.Component { state = { count: 0 }; render() { return ( 현재 카운트: {this.state.count} this.setState({ count: this.state.count + 1 })}> +1 ); }}하지만 Hooks가 등장하면서 ..

1. 컴포넌트 구조화의 필요성리액트의 가장 큰 장점 중 하나는 **컴포넌트 기반 구조(Component-Based Architecture)**입니다.즉, 화면을 여러 개의 작은 조각으로 나누어 각각 독립적으로 관리할 수 있다는 뜻입니다.예를 들어, 블로그 게시글 화면을 생각해봅시다.하나의 페이지 안에는 다음과 같은 구성 요소가 있을 수 있습니다.헤더(Header)게시글 내용(PostContent)댓글 목록(CommentList)댓글 입력창(CommentForm)이 모든 것을 하나의 파일에서 관리한다면 코드가 길어지고 복잡해집니다.하지만 리액트에서는 이 각각을 독립된 컴포넌트로 분리할 수 있습니다.function Header() { return 블로그 제목;}function PostContent() { ..

1. Props와 State란 무엇인가?리액트를 배우다 보면 가장 자주 등장하는 단어가 Props와 State입니다.이 둘은 리액트에서 데이터를 관리하고 전달하는 핵심 개념으로,컴포넌트 간의 데이터 흐름을 이해하려면 반드시 알아야 하는 부분입니다.간단히 말하자면 이렇습니다.Props: 부모 컴포넌트가 자식 컴포넌트로 데이터를 “전달”할 때 사용State: 컴포넌트 내부에서 스스로 관리하는 데이터즉, Props는 외부에서 주입되는 데이터,State는 내부에서 변화하는 데이터라고 보면 됩니다.2. Props의 개념과 사용법Props는 "Properties"의 줄임말로,부모 컴포넌트가 자식 컴포넌트에게 값을 넘길 때 사용합니다.예를 들어, 아래와 같은 구조를 생각해봅시다.function Welcome(prop..

1. 리액트란 무엇인가?웹페이지가 정적인 시절에는 HTML과 CSS로만도 충분했습니다.하지만 요즘은 버튼을 누를 때마다 화면이 바뀌고, 데이터를 불러오고,심지어 페이지 전체가 새로고침 없이 움직이죠.이런 동적인 웹 인터페이스를 효율적으로 관리하기 위해 등장한 라이브러리가 바로 React.js입니다.React는 **페이스북(현 Meta)**에서 개발한 UI 라이브러리로,“화면의 상태(state)에 따라 UI를 자동으로 업데이트”해주는 역할을 합니다.기존의 JavaScript에서는 화면을 바꿀 때마다document.getElementById() 같은 코드로 직접 DOM을 수정해야 했습니다.이 방식은 코드가 많아질수록 유지보수가 어려워집니다.React는 이런 문제를 해결하기 위해 Virtual DOM이라는 개..