> Frontend/React
-
TIL-2024.05.06 - React - 012. Styled Component - basic- 1> Frontend/React 2024. 5. 8. 07:07
질문1. Styled Component ( Css-in-JS) 에 대해 좀 더 자세히 알려줘 참조 사이트:https://styled-components.com/docs/basics#motivation styled-components: BasicsGet Started with styled-components basics.styled-components.com 시작하기- styled-components는 태그드 템플릿 리터럴을 사용하여 컴포넌트를 스타일링합니다. - 이를 통해 컴포넌트와 스타일 간의 매핑을 제거합니다.- 즉, 스타일을 정의할 때 실제로는 스타일이 적용된 일반적인 리액트 컴포넌트를 생성합니다.- 다음 예제는 스타일이 적용된 두 가지 간단한 컴포넌트, 래퍼(wrapper)와 타이틀(tit..
-
TIL-2024.05.05 - React - 011. Render Props> Frontend/React 2024. 5. 8. 07:06
질문1. Render Props 에 대해 알려줘 Render Props- React 컴포넌트 간에 코드를 재사용하기 위한 패턴 기본 예제import React from 'react';import './App.css';import RenderPropsSample from "./components/009-render-props/render-props-sample";import MouseTracker from "./components/009-render-props/mouse-tracker";class App extends React.Component { render() { return ( {value =..
-
TIL-2024.05.04 - React - 010. Recoil> Frontend/React 2024. 5. 4. 13:14
질문 : 1. React 에서 상태 관리 방법에 대해 알려줘.2. Recoil 만의 특징 Recoil- Recoil은 Facebook에서 개발한 상태 관리 라이브러리로, React 애플리케이션에서 복잡한 상태를 관리하기 위한 간편하고 강력한 도구 설치// npm을 사용하는 경우:npm install recoil// yarn을 사용하는 경우:yarn add recoil 주요 개념1. Atom - Atom은 React 컴포넌트에서 공유 및 구독할 수 있는 상태 단위로 각 Atom은 고유한 식별자와 초기값을 가지며, 컴포넌트 간에 이러한 상태를 전역적으로 공유함 2. Selector는 Atom을 기반으로 한 파생 상태를 정의하는 데 사용. - Selector를 사용하여 Atom의 값을 변환하거나 ..
-
TIL-2024.05.03 - React - 009. Context API> Frontend/React 2024. 5. 3. 13:06
질문1. React 에서 전역 상태 관리를 하는 방법이 뭐가 있을까 ? Context API- React 에서 전역적으로 사용할 데이터가 있을 때 사용되며, 중첩된 컴포넌트 간에 데이터를 전달하는 데 사용 Context 생성 - createContext 함수를 사용 예제import React, { createContext, useState } from 'react';const MyContext = createContext(); Provider & Consumer- Context를 사용하기 위해 Provider 및 Consumer를 정의 필요.Provider: 데이터를 제공하는 컴포넌트. value prop을 통해 데이터를 제공.Consumer: 데이터를 소비하는 컴포넌트. Provider 설정..
-
TIL-2024.05.02 - React - 008. Router (react-router-dom)> Frontend/React 2024. 5. 2. 15:18
질문1. React 에서 페이지 이동 하는 방식이 궁금해 Router (react-router-dom@v6)- react-router-dom을 통해 Router 기능을 활용가능- react-router-dom은 버젼 6까지 나왔음으로, 공식 문서에서 해당 기능 파악 필요. 기본 예제import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';function App() { return ( } /> } /> }> } /> );} Parameter 사용- 라우트 경로에 파라미터를 전달하여 동적인 페이지를 렌더링 예제 ... 생..
-
TIL-2024.05.01 - React - 007. CSS-Module & Styled Component> Frontend/React 2024. 5. 2. 00:32
질문1. React에서 CSS를 맥이는 방법이 뭐가 있을까? 2. CSS-in JS가 뭐야? CSS-Module- CSS Modules는 CSS 파일을 모듈로 취급하여 클래스 이름을 고유하게 만들어주는 기술- 각각의 클래스는 로컬 범위를 가지고 있어서, 전역 스코프에 영향을 받지 않으므로 클래스 이름 충돌 문제를 해결 가능. 예제import React from 'react';import styles from "../../assets/styling/3-css-module/CSSModule.module.css";/** CSS MODULE 은 CSS를 불러와서 사용할 때 클래스 이름을 고유한 값으로 설정* [파일 이름]_[쿨래스 이름]_[해시값] 형태로 자동으로 만들어서 컴포넌트 스타일 클래스 이름이 중..
-
TIL-2024.04.30 - React - 006. Hooks> Frontend/React 2024. 5. 1. 21:07
질문1. Class Component 에서는 Life Cycle Methods를 사용해서 수명주기 동안 다양한 작업을 수행할 수 있는데, Functional Component에서는 어떻게 할 수 있어? 2. 각각 종류를 알려줘. Hooks- 함수형 컴포넌트에서 상태(state)와 다른 React 기능들을 사용 가능.- 클래스 컴포넌트에서만 사용할 수 있던 기능들을 함수형 컴포넌트에서도 사용할 수 있음. Hooks 종류useStateuseEffectuseReduceruseMemouseCallbackuseRefuseContext (Context API시 논의)커스텀 Hooks useState- 함수형 컴포넌트에서 상태를 추가 - useState를 사용하면 함수형 컴포넌트에서도 상태를 관리 예제: im..
-
TIL-2024.04.29 - React - 005. Life Cycle Method> Frontend/React 2024. 4. 30. 22:25
질문1. Life Cycle Method 가 머야?2. Life Cycle Method 의 종류에 대해 알려줘 Life Cycle Method (생명 주기 메소드)- Lifecycle Method는 컴포넌트의 수명 주기 동안 발생하는 다양한 이벤트에 대응하여 코드를 실행할 수 있는 메소드들의 집합- 이러한 메소드들은 컴포넌트가 생성될 때, 업데이트될 때, 그리고 제거될 때 호출. 1. 마운트(Mount) 단계 - 마운트 단계는 컴포넌트가 DOM에 삽입되는 과정을 관리.- 주요 생명주기 메소드:- constructor(): 컴포넌트의 초기화를 위해 호출되어, 초기 state를 설정하거나 메소드를 바인딩하는 등의 작업을 수행.- static getDerivedStateFromProps():..