오늘은 부트캠프에서 바닐라 JS만으로 프로젝트를 진행한 1차 프로젝트 때와의 차이점으로 React를 활용하였을 때 느꼈던 경험에 대해 적어보고자 합니다! 수업을 진행하며, 그리고 프로젝트를 진행하며 배우고 느끼게 된 "아~ 이건 이렇게 다르구나!"라고 생각했던 포인트들을 정리해보려고 합니다! 바닐라 JavaScript만으로 만들 수 있는 건 참 많죠! 어떻게 보면 못 만드는 게 없다고 할 수 있겠습니다..!저도 처음에는 바닐라 JS로 간단한 TODO 앱, 모달, 탭 UI 같은 걸 만들면서 많은 걸 배웠었습니다.그런데 점점 프로젝트가 커지다 보니, 이런 생각이 들더라구요..."이거 상태 관리 너무 힘든데...?""코드가 점점 꼬여간다...""파일 나누기도 애매하고, 재사용도 어렵고... 이 코드 또 복붙..

안녕하세요!!리액트 개발을 하다 보면 컴포넌트 간에 데이터를 전달해야 할 때가 많죠! 바로 이때 필요한 개념이 props인데요.오늘은 React의 props가 무엇인지, 왜 필요한지, 그리고 기본적인 사용법과 주의할 점까지 깔끔하게 정리해 보겠습니다!   ✅ props란? props는 React에서 컴포넌트 간 데이터를 전달하는 데 사용하는 객체입니다. 쉽게 말해 부모 컴포넌트에서 자식 컴포넌트로 데이터를 내려주는 역할을 하죠!React는 컴포넌트 기반 개발을 하기 때문에 재사용성이 뛰어나지만, 컴포넌트 간의 데이터 전달이 필요할 때마다 props를 이용해야 합니다. (물론 다른 방법도 있긴 합니다) 그렇다면 왜 props를 써야 할까요?  ✅ props를 사용하는 이유 컴포넌트는 기본적으로 state를..

안녕하세요!!최근 아니 꽤 오래전부터 React 개발자들 사이에서는 Redux가 아닌 Zustand가 떠오르기 시작했는데요!그래서 오늘은 Zustand가 무엇인지, 왜 사용해야 하는지, 그리고 기본적인 사용법을 설명해볼까 합니다!  ✅ Zustand란?Zustand는 React 상태 관리를 위한 라이브러리입니다. 리액트에서는 저희도 알다시피 상태 관리라는 것이 굉장히 핵심적인 부분입니다.   하지만 리액트의 또 하나의 특징이 있죠..! 바로 컴포넌트 단위의 개발을 한다는 점!컴포넌트 단위의 개발을 하다보면 장점들이 매우 많지만 치명적인 단점이 하나 있는데요, 바로 컴포넌트간의 state 즉 상태 공유가 번거롭다는 점 입니다~ 그래서 우리는 이런 상태를 관리해주기 위해 Context API를 사용하거나, ..

오늘은 ref에 대해 알아봅시다!  1️⃣ ref의 기본 개념 ref(reference)는 특정 DOM 요소나 React 컴포넌트 인스턴스에 직접 접근하여 조작할 수 있도록 해주는 기능입니다. 주로 사용되는 경우를 아래에서 알아볼까요! DOM 요소 조작입력 필드에 자동으로 포커스 설정특정 요소의 스크롤 위치 조정애니메이션 직접 제어클래스형 컴포넌트 접근클래스형 컴포넌트의 메서드나 상태에 직접 접근렌더링 없이 값 저장상태(state) 변경 없이 컴포넌트 내부에서 값 유지 - ref의 장점상태 업데이트 없이 요소를 조작할 수 있어 불필요한 리렌더링 방지useState와 달리 값이 변경되어도 컴포넌트가 다시 렌더링되지 않음따라서, 상태(state) 변경이 불필요한 요소 조작이 필요한 경우 ref를 많이 활용하..

안녕하세요! 오늘은 리액트의 단방향 데이터 흐름(One-way Data Flow)에 대해 설명하는 글을 작성해 보려고 합니다! 리액트의 매력?이라고 할 수도 있고, 리액트를 어렵게 하는 요소라고도 할 수 있는ㅎㅎ 단방향 데이터 흐름의 개념을 제대로 이해하면 컴포넌트 간 데이터 전달과 상태 관리가 어떻게 되는지 예측할 수 있기 때문에 알아두는 것이 좋겠죠! 그럼 지금부터 하나씩 살펴보도록 하겠습니다!   🔸 리액트의 단방향 데이터 흐름이란? 리액트에서는 데이터가 한 방향으로만 흐릅니다!즉, 부모 컴포넌트에서 자식 컴포넌트로만 데이터를 전달할 수 있고, 반대 방향(자식에서 부모로 직접 데이터 전달)으로의 데이터 전달은 불가능합니다.자식 컴포넌트가 부모 컴포넌트에 영향을 주고 싶다면 콜백 함수를 props로..

안녕하세요! 오늘은 태그와 태그를 함께 써야 하는 이유를 알리는 글을 작성해 보겠습니다! with. React.useId Hook    ✅ 과 태그는 을 필수로 제공하는 것이 좋습니다!물론 제공하지 않아도 오류가 발생하거나 하지는 않지만 권장한다는 말 이죠! 그 이유는 이제부터 살펴보도록 하겠습니다. 🔸 태그 태그는 라디오, 체크박스, 버튼 등 다양합니다. (참고): The HTML Input element - HTML: HyperText Markup Language | MDN" data-og-description="The HTML element is used to create interactive controls for web-based forms in order to accept data f..

오늘은 감히 리액트월드에서 가장 중요한 개념 중 하나라고 할 수 있는'순수 함수'를 엄격모드(StrictMode)와 함께 설명해보고자 합니다!    ✅ 엄격 모드 (StrictMode)   – React" data-og-description="The library for web and native user interfaces" data-og-host="ko.react.dev" data-og-source-url="https://ko.react.dev/reference/react/StrictMode" data-og-url="https://ko.react.dev/reference/react/StrictMode" data-og-image="https://scrap.kakaocdn.net/dn/brufo7/hyX..

안녕하세요! 오늘은 리액트를 배우기 시작하며 복습한 내용을 적어봤습니다~!매개변수로 들어오는 것 들이 헷갈려서 그 부분을 중점으로 정리해봤습니다!오늘 말투는 노션에서 옮긴 내용이라 조금 딱딱할 예정입니당ㅎㅎ  React.createElement의 매개변수 3가지  React.createElement 에는 세가지 매개변수가 필요하다. (React Element를 생성하기 위한 필수 구조임) 1. 첫 번째 매개변수 = type이 자리에는 생성하고자 하는 HTML태그 혹은 React 컴포넌트가 들어온다. ex) h1, div, MyComponent …  2. 두 번째 매개변수 = props(속성) (필수 아님 선택 사항)1번 매개변수에 의해 생성한 요소에 추가할 속성을 정의한다.ex) { className: ..