odada

React 목차과정주소react 둘러보기https://ko.react.dev/react 핵심 개념https://odada.me/353리액트용 ES6 문법https://odada.me/322node.js, npm 개념 잡기https://odada.me/246  리액트란 무엇인가?https://odada.me/250리액트 컴포넌트(Component)https://odada.me/254리액트 속성(Props, Properties)https://odada.me/271리액트 이벤트(Event)https://odada.me/273[Hooks] useStatehttps://odada.me/274  React Router Dom을 이용한 레이아웃 구성하기https://odada.me/256[style] styled-r..

React Context리액트의 하나의 컴포넌트에서 데이터를 생성하거나 업데이트하거나 다른 컴포넌트와 데이터를 공유해서 사용하는 여러 방법이 있습니다.state 와 props를 사용해서 컴포넌트 간에 데이터를 전달useContext 란?React Context는 Component 트리 전체에 props를 전달하지 않고도 Component 데이터를 제공하는 방법으로전역 상태를 관리하기 위한 간단한 방법입니다.Context 문법생성 : createContext 함수를 사용하여 Context를 생성합니다.제공 : Context.Provider 컴포넌트를 만나면, value prop을 통해 Context의 값을 제공합니다.사용 : useContext 컴포넌트를 사용하여 Context의 값을 사용합니다.Cont..

useReduceruseReducer 란?useReducer 는 useState 보다 더 다양한 컴포넌트 상태를 관리하는 Hook 입니다. useState 는 컴포넌트 상태를 관리하는 가장 기본적인 Hook 이지만, useReducer 는 복잡한 상태 로직을 다루기에 더 적합합니다.컴포넌트에서 상태 변화 코드를 쉽게 분리할 수 있고, 상태 로직을 컴포넌트 바깥으로 빼내어 재사용할 수 있습니다.useReducer 사용법useReducer 는 다음과 같이 사용합니다.- 타입 정의const ACTION_TYPE1 = 'ACTION_TYPE1'const ACTION_TYPE2 = 'ACTION_TYPE2'- reducer 함수 정의const [state, dispatch] = useReducer(reducer,..

최적화리액트에서의 최적화 기법은 불필요한 연산을 줄여 성능을 향상시키는 것입니다.리액트 공식 문서에서는 성능 최적화를 위한 방법을 다음과 같이 소개합니다.최적화 방법코드, 폰트, 이미지 등의 리소스를 압축합니다.메모이제이션을 이용하여 불필요한 연산을 줄입니다.메모이제이션메모이제이션이란 연산의 결과를 기억했다가 필요할 때 사용함으로써 불필요한 연산을 방지하는 것입니다.useMemo : 함수의 불필요한 재실행을 방지합니다.React.memo : 컴포넌트의 불필요한 리렌더링을 방지합니다.useCallback : 함수의 불필요한 재생성을 방지합니다.useMemo 사용하기문법 : useMemo(() => 연산 결과, [의존성 배열])useMemo는 React에서 값을 메모이제이션(caching)하여 성능을 최적화..

할 일 관리 앱 만들기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에서 데이터를 한 번만 불러오고,이 데이터를 컴포넌트의 상태로 저장하여 화..

카운터 앱 만들기 리액트를 이용한 숫자를 증가시키거나 감소시키는 앱을 만들어보자. 1. 프로젝트 생성 npx create-react-app counter-app cd counter-app npm start 2. 컴포넌트(Components) 생성 src 디렉토리에 Viewer.js 파일을 생성한다. // src/Viewer.js import React from 'react' function Viewer() { return ( 0 ) } export default Viewer src 디렉토리에 Counter.js 파일을 생성한다. // src/Counter.js import React from 'react' function Counter() { return ( + - ) } e..

리액트 기본기능 첫 컴포넌트 만들기 App.js 파일에 Header, Body, Footer 컴포넌트를 만들어보자. import React from 'react' const Header = () => { return ( Header ) } const Body = () => { return ( Body ) } const Footer = () => { return ( Footer ) } function App() { return ( ) } export default App 컴포넌트 분리하기 Header, Body, Footer 컴포넌트를 따로 파일로 분리해보자. // Header.js import React from 'react' const Header = () => { retu..

API 통신1. API란?API는 application programming interface의 약자로, 프로그램과 프로그램 사이의 통신을 위한 규약이다.API는 서버와 클라이언트 사이에서 데이터를 주고 받는 방식을 의미한다.- 비동기 처리비동기 기본 : https://odada.me/337비동기 예제 : https://odada.me/309async/await를 사용한 코드async function fetchData() { // API 요청을 보내는 함수 (async : 비동기 함수) try { // try 블록 안에서 예외가 발생하면 catch 블록이 실행된다. const response = await fetch('https://API.example.com/data'); // fetch..

react build 후 배포하기 1. build 웹브라우저는 html, css, javascript만 이해할 수 있다. react는 jsx로 작성되어 있기 때문에 브라우저가 이해할 수 없다. build란 개발자가 작성한 코드를 브라우저가 이해할 수 있는 번역된 코드로 변환하는 것을 말한다. $ npm run build $ yarn build 2. gh-pages 설치 gh-pages는 GitHub에서 제공하는 호스팅 서비스로 GitHub 저장소에 정적 파일을 업로드하여 배포할 수 있다. $ npm install gh-pages $ yarn add gh-pages package.json 파일 수정 { "homepage": "https://[사용자 이름].github.io/[저장소 이름]", // "hom..