odada

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

1. 이벤트(Event) 이벤트란 사용자가 웹 브라우저에서 DOM 요소들과 상호작용하는 것을 말한다. 이벤트를 사용할 때는 on이벤트명={이벤트 핸들러} 형식으로 사용한다. 이벤트 핸들러는 이벤트가 발생했을 때 실행되는 함수로 함수의 형태로 작성해야 한다. 이벤트 핸들러에 ()를 붙이지 않는 이유는 이벤트를 등록할 때 함수를 호출하는 것이 아니라 함수를 등록하기 때문이다. 이벤트 종류 React 공식문서에서 확인 가능하다. 이벤트 객체 이벤트 핸들러의 첫 번째 파라미터로 이벤트 객체를 받을 수 있다. 이벤트 객체에는 이벤트가 발생한 DOM 요소에 대한 정보와 이벤트에 대한 정보가 들어있다. import React from 'react'; function App() { const handleClick = ..

1. Props(Properties) 란? 컴포넌트의 속성을 설정할 때 사용하는 요소이다. 컴포넌트에게 전달되는 데이터를 의미한다. Components로 고양이를 계속 만들어낼 수 있다면... Props로 서로 다른 고양이를 만들어낼 수 있다. 이미지 출처 : https://javascript.plainenglish.io/basic-react-components-and-props-for-showing-lots-of-cats-d41bf67cc26 2. Props의 특징 컴포넌트의 속성(props)은 컴포넌트를 사용할 때 설정하는 속성 컴포넌트의 속성은 부모 컴포넌트에서 설정할 수 있다. 컴포넌트 내부에서는 설정할 수 없음 {}를 사용하여 자바스크립트 표현식을 속성 값으로 설정할 수 있음 - Props.ch..

React에서 GSAP 사용하기 GSAP 설치하기 npm install gsapGSAP 사용하기 import { gsap } from 'gsap'; gsap.to('.box', { x: 100 }); GSAP을 전역으로 사용하기 위해선 index.js에 아래 코드를 추가해야 한다. // index.js import gsap from 'gsap'; import { ScrollTrigger } from 'gsap/ScrollTrigger'; gsap.registerPlugin(ScrollTrigger); GSAP을 사용할 header.jsx 파일을 만들고 아래와 같이 코드를 작성한다. 스크롤 이벤트 핸들러를 만들어서 스크롤이 100px 이상이면 헤더의..

리액트 ES6 문법 정리 1. 변수 변수는 let, const 키워드를 사용하여 선언한다. let value = 1 console.log(value) // 1 value = 2 console.log(value) // 2 const a = 1 a = 2 // 에러 발생 2. 템플릿 문자열 (Template String) 템플릿 문자열은 문자열 안에 변수와 연산식을 넣을 수 있습니다. const string1 = '안녕하세요.'; const string2 = '김겨울입니다.'; const greeting = ${string1} + ' ' + ${string2}; // 병합 연산자를 사용한 문자열 연결 const cat = { kind: '러시안블루',..

React Table Data 아래 이미지와 같은 테이블을 만들어보자. table의 데이터는 배열로 만들어서 map()을 사용 map()을 사용할 때는 key값을 넣어줘야 한다. map()을 사용할 때는 () => ()를 사용한다. 1. Table Data 만들기 import { Card, CardHeader, Heading, CardBody, Table, TableCaption, Thead, Tbody, Tr, Th, Td, TableContainer, Image, } from '@chakra-ui/react'; import apple from '../../assets/img/apple.png'; import android from '../../assets/img/a..

React Router를 이용한 프로젝트 시작하기 https://github.com/oddoddo/-react-js-layout React Router란? https://github.com/remix-run/react-router React Router는 React에서 라우팅 처리를 도와주는 라이브러리이다. 장점 쉬운 설치와 사용 : npm 또는 yarn을 이용하여 쉽게 설치할 수 있다. 컴포넌트 기반 라우팅 : 라우팅을 위한 컴포넌트를 만들어 사용할 수 있다. 코드의 가독성 및 유지보수 : 코드의 가독성이 높아져 유지보수가 쉽다. 다양한 기능 : 링크, 중첩된 라우팅, 동적 라우팅 등 다양한 기능을 제공한다. - 프로젝트에 라우터 설치하기 라우터를 적용하기 위해서는 react-router-dom 라이브..

React를 이용한 layout 컴포넌트, React Router(리액트 라우터) 페이지 이동 구현하기 Chakra-ui를 사용해서 DashBoard의 Layout을 만들어보려고 합니다. 아래 url의 디자인을 참고해 만들었습니다. github url Horizon Free Dashboard Figma 1. Chakra UI 란? Chakra UI는 React용 디자인 시스템을 제공하는 라이브러리입니다. Chakra UI는 컴포넌트 기반의 스타일링을 제공하며, 테마 설정을 통해 쉽게 스타일을 적용할 수 있습니다. Chakra UI의 주요 특징은 다음과 같습니다: 컴포넌트 기반 스타일링: Chakra UI는 다양한 컴포넌트를 제공하며, 이를 사용해 스타일을 적용할 수 있습니다. 테마 설정: Chakra U..

컴포넌트(Components), Props - react 배우기 1. 리액트 컴포넌트(React Components)란? 컴포넌트란 재사용 가능한 UI 조각을 의미한다. 컴포넌트를 이용하면 더 쉽게 UI를 재사용할 수 있고, 유지보수도 쉬워진다. 컴포넌트는 독립적이고 재사용 가능하며, 여러 컴포넌트를 조합하여 화면을 구성할 수 있다. 컴포넌트는 트리 형태로 구성되어 있으며, 최상위 컴포넌트는 하나만 있어야 한다. - 컴포넌트의 규칙 컴포넌트는 함수 또는 클래스로 정의할 수 있음 컴포넌트 이름은 대문자로 시작해야 함 소문자로 시작할 경우 컴포넌트를 DOM 태그로 인식하게 됨 컴포넌트로부터 엘리먼트를 생성하여 이를 리액트 DOM에 랜더링에 전달할 수 있음 // html div 태그로 인식 const elem..

1. 엘리먼트의 정의 리액트 앱의 가장 작은 블록들을 엘리먼트라고 한다. 개발자모드의 html 요소가 DOM 엘리먼트이다. 리액트 엘리먼트는 DOM 엘리먼트의 가장 표현으로 리액트 앱의 가장 작은 블록들을 엘리먼트라고 한다. 아래 코드가 실행될 때, 대입 연산자의 오른쪽 부분은 리액트의 creactElement() 함수를 사용하여 엘리먼트를 생성한다. const element = Hello, world; 2. 엘리먼트 표현 엘리먼트는 자바스크립트 객체 형태로 존재한다. 컴포넌트 유형과 속성 및 내부의 모든 자삭에 대한 정보를 포함하고 있는 일반적인 자바스크립트 객체 { type: 'button', // 엘리먼트의 유형 props: { // 엘리먼트의 속성 className: 'btn-red', child..