props

props 1. props - React 라이브러리를 사용하는 컴포넌트 기반의 웹 애플리케이션에서 사용되는 용어 - React 컴포넌트는 함수 or 클래스 형태로 정의될 수 있으며, 이들은 속성을 받아들일 수 있음 - 이러한 속성들은 컴포넌트 내부에서 사용되어, 컴포넌트의 동작 or 표시 내용을 결정하는데 활용 2. 사용방법 - ProductListItem.js import React, { useState } from "react"; function ProductListItem(props) { // props를 사용하여, 데이터 전달 const imgNo = props.imgNo; const productName = props.name; const productPriceFormatted = props.p..

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

JSX

JSX 1. JSX (JavaScript XML) - React와 같은 JavaScript 라이브러리를 위해 만들어진 확장 문법 - JavaScript 코드 안에서 XML과 비슷한 형태의 마크업을 작성할 수 있음 2. JSX의 특징 - JavaScript의 확장 문법이기 때문에, JavaScript 코드와 매우 유사 - XML과 비슷한 구조를 가지고 있어, 태그들을 사용하여 컴포넌트를 정의 및 중첩 가능 - JSX 조각을 별도의 변수로 분리 가능 3. 예시 - NumberCounter.js import React, { useState } from "react"; const NumberCounter = () => { const [no, setNo] = useState(0); // 별도의 변수로 분리 con..

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

setTimeout 함수

setTimeout 함수 1. setTimeout 함수 - 비동기적인 실행을 할 때, 사용되는 타이머 함수 - 특정 코드 블록을 지정된 시간 후에 실행할 수 있음 2. setTimeout 함수의 구문 - callback : 지연 후 실행될 함수 - delay : 실행을 지연시킬 시간을 밀리초 단위로 정수값으로 지정 - arg1, arg2, ... : 콜백 함수에 전달할 인수들 setTimeout(callback, delay, arg1, arg2, ...); 3. 예시 function hello() { console.log("실행3"); } // 실행3은 바로 실행되지 않고, 3초 뒤에 실행됨 setTimeout(hello, 3000); console.log("실행1"); console.log("실행2")

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

useMemo

useMemo 1. useMemo - 복잡한 연산 or 계산이 필요한 값을 Memoization하여, 성능을 최적화하는 데 사용 ※ Memoization : 이전에 계산한 값을 저장하여, 동일한 입력이 주어질 때, 다시 계산하는 대신, 저장된 값을 반환 - 특정 값이변경될 때만, 해당 값을 다시 계산하고, 그렇지 않은 경우, 이전에 계산된 값을 재사용할 수 있음 2. 사용방법 const a = useMemo(() => { // 계산하고자 하는 값 or 연산 }, [b]); - [b] : 의존성 목록으로, 이 목록에 포함된 값들이 변경될 때에만 useMemo의 콜백 함수를 실행 ※ 의존성 목록이 변경되지 않으면, 이전에 계산된 값을 재사용함 ※ 의존성 목록 생략 시, useMemo의 콜백 함수는 한 번만 ..

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

Reducer

Reducer 1. Reducer - 상태 관리를 위해 사용 - 복잡한 상태를 가진 컴포넌트에서 상태 업데이트 로직을 분리하여 관리할 수 있음 - 즉, 현재 상태와 액션 객체를 파라미터로 받아와서 새로운 상태를 반환해주는 함수임 2. 사용방법 - ReducerEx.js import React, { useReducer } from "react"; function reducer(state, action) { switch (action.type) { case "INCREMENT": return { value: state.value + 1 }; case "DECREMENT": return { value: state.value - 1 }; default: return state; } } const ReducerE..

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

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