본문 바로가기

Language/React

 (22)
📘 React와 Next.js의 차이점 ✅ Next.js란?React기 반의 풀스택 웹 프레임워크 이다.React를 더 쉽고, 더 빠르게, 더 강력하게 쓸 수 있도록 도와주는 '도구상자' 이다.✅ React와 Next.js의 차이둘 다 React 생태계의 속한 기술이다. 목적과 사용방식에 큰 차이가 있다. ✅ 1. 정의와 역할 항목ReactNext.js정의UI 라이브러리 (View Layer 전담)React 기반의 웹 프레임워크역할컴포넌트 기반 UI 구성만 담당라우팅, SSR, 빌드, API 등 전체 웹앱 구조 제공*웹 프레임 워크란, 웹 애플르케이션을 더 쉽게, 빠르게, 안정적으로 만들 수 있도록 도와주는 도구(틀) 이다.*SSR이란, 사용자가 웹 사이트를 요청했을 때 페이지 내용을 서버에서 미리 HTML로 만들어서 보내주는 방식 ✅ 2..
📘 React Redux를 진짜 중요하게 사용하는 이유 ✅ React Redux를 진짜 중요하게 사용하는 이유컴포넌트가 많고, 상태를 여러 군데에서 공유해야할 때, 데이터를 예측 가능하고 깔끔하게 관리하기 위해서이다. ✅ 상황예를들어, 로그인 상태, 유저 정보, 장바구니, 알림메세지,설정값 이걸 여러 컴포넌트에서 사용해야한다.Header에서는 로그인 상태 필요하고,Profile에서는 유저 정보가 필요하고,Cart에서는 장바구니가 필요하고, Footer에서는 알림 메세지를 띄워야하고 이걸 전부 props로 받으려면 지옥같은 상황이다. 🔔 Redux가 도와주는것Redux가 해결해주는 문제설명✅ 예측 가능한 흐름상태는 reducer로만 바뀌니까, 데이터 흐름이 일정함✅ 디버깅 쉬움액션 로그가 남고, 무슨 일이 언제 일어났는지 알 수 있어✅ 복잡한 앱에 강함페이..
최신버전 Redex Toolkit 예제 redux Toolkit 은 Redux를 더 간단하고 현대적으로 쓰게 도와주는 도구createStore 대신 configureStore를 사용한다. 1.설치 2.폴더 구조 3. counterSlice.js에 상태와 액션 만들기상태 ( state ) : 숫자 0액션 ( action ) : increment, decrement리듀서( reducer ): 액션에 따라 상태 변경 4. store 설정하기5.App.js 상태 보기 + 변경 버튼 만들기앱 처음 시작하면 카운터 : 0+1 누르면 1, 2, 3 ...-1을 누르면 -> 다시 줄어든다. 동작의 흐름 정리처음엔 상태 0으로 시작사용자가 +1버튼 누름 dispatch(increment()) 실행counterSlice에서 state +1 해줌store의 값이..
📘 React Redux ✅ React Redux란?상태(state)를 한곳에서 관리하는 라이브러리이다.모든 컴포넌트가 공유하는 전역 상태 저장소(store)를 만들 수 있다. 쉬운설명앱 전체에서 사용할 수 있는 커다란 노트 라고 생각하면 된다. 😵‍💫 왜 사용하는걸까?React는 기본적으로 useState, useContext로 상태를 관리하지만컴포넌트가 많아지고, 서로 멀리 떨어진 컴포넌트 끼리 데이터를 주고받아야할 때 상태 관리가 복잡해짐이걸 깔끔하게 해결해주는게 Redux 이다. 더 쉬운설명부모 -> 자식 -> 손자 -> 증손자 ...데이터를 내려주고 내려주고 계속 내려줘야하는데 모두가 같이 보는 하나의 노트를 만드는게 Redux의 store (저장소) 이다. 💡 예시로 쉽게 이해해보기 선생님이 있고, 학생들이 ..
📘 React Router ✅ React Router란?React에서 라우팅을 담당하는 라이브러리사용자가 URL을 바꿧을 때 페이지 전체를 새로 고치지 않고도 컴포넌트를 바꿔서 보여줄 수 있다.가장 많이 쓰는 버전은 react-router-dom(웹 전용) 🧠개념용어설명BrowserRouterHTML5 history API 기반의 라우터. 보통 앱 전체를 감쌈Routes여러 개의 Route를 묶는 컴포넌트Route특정 경로에 어떤 컴포넌트를 보여줄지 지정Link페이지 새로고침 없이 다른 경로로 이동할 수 있게 해주는 컴포넌트useNavigate()자바스크립트로 페이지 이동 (프로그래밍적 이동)useParams()URL 파라미터 가져오기useLocation()현재 위치(URL, 쿼리 등) 정보 가져오기 ✅ React Router..
✅ React 데이터 전달 ✅ React 데이터 전달React에서 props는 부모 컴포넌트가 자식 컴포넌트로 데이터를 전달하는 수단전달할 수 있는 값은 문자열, 숫자, 배열, 객체, 함수 등 모든 JavaScript 값이 가능하다.✅ React 데이터 전달 예✅부모 -> 자식 (props)자식 컴포넌트에 값을 넣어주면, 그걸 자식이 props로 받아서 사용하는 구조 // 부모 컴포넌트function Parent() { return Child name="완두콩" />;}// 자식 컴포넌트function Child(props) { return h1>안녕, {props.name}!h1>;} 📌 여기서 "완두콩"이 부모에서 자식으로 전달된 데이터이다. ✅자식 -> 부모(함수 props 사용)자식이 어떤 이벤트(버튼 클릭 등)를 부..
✅ React 이벤트 관련 ✅ React 이벤트React에서 이벤트는 브라우저의 DOM 이벤트와 유사하지만, 몇 가지 차이점이 있다.예를 들어, React는 브라우저의 기본 이벤트 시스템이 아니라 자체적으로 만든 이벤트 래퍼 시스템(SyntheticEvent)을 사용한다.✅ React 이벤트 특징이벤트 명명 방식 : cameCase 사용 (onClick -> onClick)함수 전달 방식 : 문자열 아님, 함수를 직접 전달 onClick={handleClick}synthenticEvent 사용 : 브라우저 이벤트를 감싸는 개체로, 모든 브라우저에ㅓ 일관 된 동작을 보장 ✅synthenticEvent 란?synthenticEvent 는 React가 만든 일관된 인터페이스의 이벤트 객체브라우저마다 다른 이벤트 동작을 표준화해서, 개..
📘 React Hook ✅ React Hook 이란?함수형 컴포넌트에서 상태(State)관리나, 생명주기(lifecycle) 같은 기능을 사용할 수 있게 해주는 React의 내장 함수들이다.Hook이 등장하기 전에는 이런 기능들을 클래스형 컴포넌트에서만 사용할 수 있었지만,React 16.8부터는 함수형 컴포넌트에서도 Hook 덕분에 동일한 기능을 할 수 있게 됐다. ✅ 왜 "Hook(걸다)"라고 부를까?React의 내부 시스템에 기능을 걸어서 연결한다는 의미이다.상태를 컴포넌트에 걸고 싶을 땐, useState사이드 이펙트를 걸고 싶을 땐, useEffect어떤 값이나 Dom에 참조를 걸고 싶을땐, useRef ✅ Hook의 종류 (중요한 것만 요약) Hook 이름설명useEffect컴포넌트가 렌더링될 때 실행할 코드 지정 ..

티스토리툴바