Context

Context 1. Context - React 애플리케이션에서 컴포넌트 간에 데이터를 전달하는 메커니즘 - 중간 컴포넌트를 건너뛰고, 컴포넌트 트리 내에서 데이터를 직접 전달할 수 있음 - 즉, Context는 state를 쉽게 공유할 수 있게 함 2. 사용방법 - ContextEx.js import React, { createContext, useContext } from "react"; // Context를 사용하여, background의 색을 지정 const ThemeContext = createContext("pink"); const ContextEx = () => { const theme = useContext(ThemeContext); const style = { width: "100px",..

• format_list_bulleted Front-End Study/React
• · 2023. 7. 7.
• textsms

useEffect

useEffect 1. useEffect - React 라이브러리에서 제공하는 훅(Hook) 중 하나 - 함수형 컴포넌트에서 부작용(side effect)을 처리하기 위해 사용 ※ 여기서 부작용이란? 컴포넌트 외부와의 상호작용을 의미 - useEffect를 사용 시, 컴포넌트가 렌더링되고 난 후, 특정 작업을 수행할 수 있음 - 컴포넌트의 생명주기와 관련된 작업을 처리 ※ 컴포넌트 생명주기 : 컴포넌트가 생성되고 소멸될 때까지의 과정 - useEffect 함수는 두 개의 매개변수를 받음 - 첫 번째 매개변수는 작업을 담은 콜백 함수 (컴포넌트가 렌더링될 때마다 실행됨) - 두 번째 매개변수는 의존성 배열(dependency array)로, 배열에 지정된 값이 변경될 때만 콜백 함수를 실행 2. 사용방법 ..

• format_list_bulleted Front-End Study/React
• · 2023. 7. 5.
• textsms

useState

useState 1. useState - React 라이브러리에서 제공하는 훅(Hook) 중 하나 ※ 훅(Hook) : 함수형 컴포넌트에서 상태(State) 관리와 기능들을 사용하기 위한 기능을 제공하는 함수 - 함수형 컴포넌트에서도 상태(State)를 관리할 수 있음 - 배열 형태의 반환값을 가지며, 배열의 첫 번째 요소는 현재의 상태 값, 두 번째 요소는 상태 값을 변경할 수 있는 함수 2. 사용법 - Counter.js import React, { useState } from "react"; const Counter = () => { // 변수 선언 const [value, setValue] = useState(0); return ( 현재 카운터 값은 [{value}]입니다. {/* 버튼 클릭 시,..

• format_list_bulleted Front-End Study/React
• · 2023. 7. 5.
• textsms

외부 컴포넌트 파일을 이용한 출력

외부 컴포넌트 파일을 이용한 출력 1. 외부 컴포넌트 파일을 이용한 출력 - React는 외부 컴포넌트 파일을 이용하여 출력할 수 있음 - 효율성이 높고, 수정이 용이함 2. 사용방법 - 외부 파일을 하나 생성 (ex : HelloWorld.js) - 외부 파일에 다음과 같이 입력 - HelloWorld.js에 다음과 같이 입력 import React from "react"; const HelloWorld = () => { return ( Hello World!! ); }; export default HelloWorld; - App.js에 다음과 같이 입력 import React from "react"; // import로 외부 컴포넌트를 불러옴 import HelloWorld from "./HelloW..

• format_list_bulleted Front-End Study/React
• · 2023. 7. 4.
• textsms

React

React 1. React - 사용자 인터페이스를 구축하기위한 JavaScript 라이브러리 - 컴포넌트 기반 아키텍처를 사용하여 웹 및 모바일 애플리케이션의 UI를 구축하는 데 사용 - JSX라는 문법을 제공하여, JavaScript와 HTML을 조합하여, 컴포넌트를 작성할 수 있도록 함 ※ JSX : JavaScript XML의 약자로, React와 함께 사용되는 JavaScript 확장 문법 - 다양한 확장성과 유용한 라이브러리 및 도구를 제공 2. React 설치 - npx를 사용하기 위해 node.js를 설치함 - 원하는 폴더에 cmd로 접속한 후, npx create-react-app . 이라고 입력 - 그 후, VScode에 들어간 뒤, 터미널에 npm run start 라고 입력 - 그러면..

• format_list_bulleted Front-End Study/React
• · 2023. 7. 4.
• textsms

@mixin

@mixin 1. @mixin - 재사용 가능한 코드 블록을 정의하는 데 사용되는 기능 - 스타일 규칙을 그룹화하고 필요할 때 재사용할 수 있음 2. 형식 - 스타일 규칙은 중괄호('{ }')안에 작성되며, CSS 속성과 값을 포함할 수 있음 @mixin 믹스인 이름 { // 스타일 규칙 } See the Pen Tistory_Front-End Study_Sass_@mixin_2. 형식 by NewBean0312 (@newbean0312) on CodePen. See the Pen Tistory_Front-End Study_Sass_@mixin_2. 형식 2 by NewBean0312 (@newbean0312) on CodePen.

• format_list_bulleted Front-End Study/Sass
• · 2023. 6. 29.
• textsms