odada

Redux로 전역 상태 관리하기Redux 소개Redux는 상태 관리 라이브러리로, React와 함께 사용하기 좋습니다. Redux를 사용하면 컴포넌트 간에 상태를 쉽게 공유할 수 있습니다.- Redux 특징Single Source of Truth: 애플리케이션의 상태는 하나의 스토어에 저장됩니다.State is Read-Only: 상태를 직접 변경할 수 없습니다. 상태를 변경하는 유일한 방법은 액션을 디스패치하는 것입니다.Changes are Made with Pure Functions: 상태를 변경하는 함수인 리듀서는 순수 함수여야 합니다.- Redux 구조Actions: 상태 변경을 위한 객체Reducers: 상태를 변경하는 함수Store: 애플리케이션의 상태를 저장하는 객체store/|-- acti..

리액트 ES6 문법 정리 리액트는 ES6 문법을 사용하여 개발합니다. ES6는 자바스크립트의 표준 버전으로, 보다 간결하고 효율적인 코드 작성을 가능하게 합니다. 이번 장에서는 ES6 문법을 정리하고, 리액트에서 사용하는 주요 문법을 알아보겠습니다. 1. 변수 변수는 let, const 키워드를 사용하여 선언한다. 변수란 데이터를 담는 공간을 의미합니다. 변수를 선언할 때는 var, let, const 키워드를 사용합니다. let : 재할당할 수 있는 변수를 선언할 때 사용한다. 값을 변경할 수 있다. const : 상수를 선언할 때 사용한다. 값을 변경할 수 없는 값을 명확하게 표시할 때 사용한다. 의도치 않은 값 변경을 방지한다. var : 변수를 선언할 때 사용한다. ES6 이전에 사용하던 키워드로..

할 일 관리 앱 만들기0. 프로젝트 생성하기todo-Todo 디렉토리를 생성 후 프로젝트를 생성합니다.npx create-next-app@latest ./https://ko.react.dev/learn/start-a-new-react-project1. 컴포넌트 구조 설계하기2. 컴포넌트 제작- Header 컴포넌트 만들기// src/components/TodoHd.jsximport React from 'react';const TodoHd = () => { return ( 📝 할 일 관리 앱 2024.03.11 오늘의 할 일을 적어보세요. );};export default TodoHd;- TodoEditor 컴포넌트 만들기// src/components/TodoEdit..

라이프 사이클 (생명주기) 이해하기React에서 컴포넌트의 생명주기를 관리하는 것은 앱의 성능과 유지보수성에 중요한 영향을 미칩니다. 특히, 함수형 컴포넌트에서는 useEffect 훅을 사용하여 이러한 관리 작업을 수행합니다.- 뉴스 예제로 알아보는 라이프 사이클데이터를 불러와 화면에 표시하는 간단한 뉴스 목록 컴포넌트를 생각해볼 수 있습니다.생명주기 단계소셜 미디어 대시보드Mounting (마운팅)데이터 가져오기Updating (업데이팅)실시간 업데이트Unmounting (언마운팅)컴포넌트가 DOM에서 제거되는 단계마운트 (Mounting) - 태어나고이 컴포넌트는 useEffect 훅을 사용해 컴포넌트가 마운트될 때 뉴스 API에서 데이터를 한 번만 불러오고,이 데이터를 컴포넌트의 상태로 저장하여 화..

우리가 배울 것들 HTML 웹 페이지의 구조를 정의하는 언어 https://www.w3schools.com/html/default.asp 웹 페이지의 기본적인 뼈대를 만들며, 텍스트, 이미지, 링크 등의 콘텐츠를 웹에서 어떻게 표시할지 정의합니다. 태그(tag) 기반으로 되어 있으며, , HTML 기본 문서 HTML은 웹 문서를 만드는 언어입니다. CSS 란? 웹 페이지의 디자인과 레이아웃을 담당하는 스타일 시트 언어 https://www.w3schools.com/css/default.asp HTML 요소의 색상, 폰트, 간격, 크기 등을 설정하여 사용자에게 보여지는 페이지의 시각적인 면을 꾸밉니다. 클래스, ID, 태그 등 다양한 선택자(selector)를 사용하여 특정 HTML 요소를 대상으로 스타일..

React Library React Router React Router는 React 라이브러리로, 라우팅을 구현할 때 사용한다. - 설치하기 React Router를 설치할 때는 다음 명령어를 사용한다. yarn add react-router-dom npm install react-router-dom - 사용하기 // index.js import { BrowserRouter } from 'react-router-dom'; ; // App.js import { Route } from 'react-router-dom'; ; ; ; ; // Home.js import { Link } from 'react-router-dom'; 소개; // Profile.js impo..

React 배우기 - 상태(State)1. State상태(State)란 컴포넌트가 가질 수 있는 동적인 데이터를 의미합니다.사용자가 입력한 텍스트현재 선택된 메뉴 항목토글 버튼의 on/off 상태서버에서 받아온 데이터useState 기본 문법 설명const [state, setState] = useState(initialValue);// - state: 현재 상태 값// - setState: 상태를 변경하는 함수// - initialValue: 초기 상태 값- State와 Props의 차이리액트 컴포넌트는 입력과 출력이 있는데 prop를 통해 입력된 데이터를 우리가 만든 컴포넌트 함수가 처리해서 retrun을 통해 출력한다.props는 컴포넌트를 사용하는 외부자를 위한 데이터이다.state는 props와..

1. 이벤트(Event)이벤트란 사용자가 웹 브라우저에서 DOM 요소들과 상호작용하는 것을 말한다.이벤트를 사용할 때는 on이벤트명={이벤트 핸들러} 형식으로 사용한다.이벤트 핸들러는 이벤트가 발생했을 때 실행되는 함수로 함수의 형태로 작성해야 한다.이벤트 핸들러에 ()를 붙이지 않는 이유는 이벤트를 등록할 때 함수를 호출하는 것이 아니라 함수를 등록하기 때문이다.이벤트 종류React 공식문서에서 확인 가능하다.마우스 이벤트onClick : 마우스를 클릭했을 때 발생onDoubleClick : 마우스를 더블 클릭했을 때 발생onMouseOver : 마우스를 요소 위로 올렸을 때 발생onMouseOut : 마우스를 요소 밖으로 옮겼을 때 발생onMouseEnter : 마우스가 요소 안으로 들어왔을 때 발생..

1. Props(Properties) 란?컴포넌트의 속성을 설정할 때 사용하는 요소이다.컴포넌트에게 전달되는 데이터를 의미한다.Components로 고양이를 계속 만들어낼 수 있다면...Props로 서로 다른 고양이를 만들어낼 수 있다.이미지 출처2. Props의 특징컴포넌트의 속성(props)은 컴포넌트를 사용할 때 설정하는 속성컴포넌트의 속성은 부모 컴포넌트에서 설정할 수 있다.컴포넌트 내부에서는 설정할 수 없음{}를 사용하여 자바스크립트 표현식을 속성 값으로 설정할 수 있음- Props.children (props.속성이름)컴포넌트 태그 사이에 작성한 내용을 조회할 때 사용한다.컴포넌트 태그 사이에 작성한 내용은 props.children이라는 props로 전달된다.// App.jsimport Re..