odada

라이프 사이클 (생명주기) 이해하기 React에서 컴포넌트의 생명주기를 관리하는 것은 앱의 성능과 유지보수성에 중요한 영향을 미칩니다. 특히, 함수형 컴포넌트에서는 useEffect 훅을 사용하여 이러한 관리 작업을 수행합니다. - 예제로 알아보는 라이프 사이클 데이터를 불러와 화면에 표시하는 간단한 뉴스 목록 컴포넌트를 생각해볼 수 있습니다. 이 컴포넌트는 useEffect 훅을 사용해 컴포넌트가 마운트될 때 뉴스 API에서 데이터를 한 번만 불러오고, 이 데이터를 컴포넌트의 상태로 저장하여 화면에 뉴스 목록을 렌더링합니다. 만약 사용자가 특정 카테고리를 선택하면, 해당 카테고리에 맞는 뉴스 데이터를 다시 불러와 업데이트할 수 있습니다. 이렇게 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..

비동기 처리 비동기 처리란, 작업을 동시에 처리하는 것을 말한다. 자바스크립트는 싱글 스레드 언어이기 때문에, 한 번에 하나의 작업만 처리할 수 있다. 하지만, 비동기 처리를 통해 여러 작업을 동시에 처리할 수 있다. 동기와 비동기 동기처리의 예: 은행에서 번호 순서대로 업무를 처리하는 것, 순차적으로 처리되는 것 비동기처리의 예: 커피 주문 시 앞번호가 먼저 나오는 것, 동시에 처리되는 것 - 동기 처리 동기 처리란, 작업을 순차적으로 처리하는 것을 말한다. 자바스크립트 코드는 기본적으로 동기적으로 처리된다. 동기적으로 처리되는 코드는 위에서부터 아래로 순차적으로 실행되며, 어떤 작업이 끝나야 다음 작업을 수행할 수 있다. 하지만, 동기적으로 처리되는 코드는 작업이 끝날 때까지 다른 작업을 수행할 수 ..

Parallax Scrolling (CSS, JS, AOS, ScrollMagic, GSAP) 패럴랙스 스크롤링은 웹사이트의 요소들이 서로 다른 속도로 움직이는 것 레이어별 스크롤 속도를 다르게 하여 입체감을 주는 디자인 기법 게임, 애니메이션 등에서 주로 사용되던 기법으로 인터랙티브한 웹사이트를 만들 때 사용 javascript, css, 라이브러리 등을 이용하여 구현 CSS를 이용한 패럴랙스 스크롤링 css perspective 속성을 이용한 패럴랙스 스크롤링 mdn 해당 요소의 z = 0 평면과 사용자 사이의 거리 transform 효과를 주고자 하는 부모 요소에 적용 perspective에 따른 변형 효과 perspective: 100px; => 100px만큼 멀어져 보임 perspective가 ..

axios 라이브러리를 사용한 api 통신 1. api란? api는 application programming interface의 약자로, 프로그램과 프로그램 사이의 통신을 위한 규약이다. api는 서버와 클라이언트 사이에서 데이터를 주고 받는 방식을 의미한다. 2. axios 라이브러리를 사용한 api 통신 axios는 API 요청을 보내는 라이브러리 Axios는 JavaScript에서 사용되는 유명한 HTTP 클라이언트 라이브러리로 웹 브라우저와 Node.js 환경에서 사용될 수 있으며, HTTP 요청을 보내고 받는 기능을 제공합니다. Axios는 Promise 기반의 API를 사용하여 비동기 HTTP 요청을 간편하게 처리할 수 있게 해줍니다. - Axios 설치 npm install axios ya..

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..

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..

Framer Motion - 리액트 라이브러리 Framer Motion은 단순하면서도 강력한 React용 모션 라이브러리이다. 사이트 : https://www.framer.com/motion/ 1. 설치하기 yarn add framer-motion npm install framer-motion 2. 기본 사용법 import { motion } from 'framer-motion'; 으로 motion을 불러옵니다. motion이 들어갈 요소에 motion을 붙여줍니다. initial(초기값)과 animate(애니메이션)을 설정합니다. styled-components를 사용하는 경우에는 styled(motion.div)로 사용합니다. import { motion } from 'frame..

React 배우기 - 상태(State) 1. State 상태란 컴포넌트 내부에서 선언하며 내부에서 값을 변경할 수 있는 데이터를 의미한다. - State와 Props의 차이 리액트 컴포넌트는 입력과 출력이 있는데 prop를 통해 입력된 데이터를 우리가 만든 컴포넌트 함수가 처리해서 retrun을 통해 출력한다. props는 컴포넌트를 사용하는 외부자를 위한 데이터이다. state는 props와 비슷하지만 컴포넌트 내부에서 선언하며 내부에서 값을 변경할 수 있다. state는 컴포넌트 자신을 위한 데이터이다. - State의 특징 상태는 객체 형태의 데이터이다. 상태는 컴포넌트 내부에서 선언되어야 한다. 상태는 props와 달리 컴포넌트 내부에서 값을 변경할 수 있다. - State를 사용하는 이유 사용자..