frontend (React) 개발17 (React) useContext useContext 는 여러층의 컴포넌트를 호출할 필요가 있지만 호출측의 데이터를 특정한 컴포넌트만에서 사용할 필요가 있을시 사용.(props를 쓰는 방법도 있지만 중간 계층의 콤포넌트들은 사용하지 않고 전달만 하는 측면에서 비효율적임)1. 사용방법 1.1 context 생성// context.js import { createContext } from 'react'; export const Context = createContext('Default Value'); 1.2 context 제공 호출컴포넌트를 로 감싸고 value 를 전달import { Context } from './context'; function Main() { const value = 'My Context.. 2023. 11. 23. (React) Props component 간에 데이터를 전달할 때 사용 데이터를 받는 방법1. 받는 함수의 파라미터에 { 변수명1, 변수명2, ... } 을 명시// 호출측 greet="Welcome" who="John" /> // 받는측 function Message( { greet, who } ) { return {greet}, {who}!; } 2. 받는 함수의 파라미터로 props 를 선언// 호출측 who="John"> // 받는측 function Hello(props) { return Hello, {props.who}!; } 3. 받는측이 클래스의 경우// 호출측 // Render who="John" /> // 받는측 import { Component } from 'react'; class HelloAsCla.. 2023. 11. 23. (React) useRef 초기값을 지정할 수도 없을 수도 있음.useRef() 를 호출하면 ref 오브젝트를 반환, 오브젝트는 유일한 프로퍼티 current 를 가지며 값을 참조 변경 할 수 있다.import { useRef } from 'react'; function MyComponent() { const intervalRef = useRef(0); const inputRef = useRef(null); // ... 용도1. state와 달리 재렌더링은 유발하지 않고 단순히 변화된 값만 저장하고 싶을 경우return () 내에서의 사용은 자제해고 단순히 이벤트 함수내에서 값을 변경.import { useRef } from 'react'; export default function Counter() { l.. 2023. 11. 21. (React) useEffect useEffect 는 직접적인 타켓 출력을 하지 않는 작업으로서 fetch request, DOM 직접 조작, 타이머 함수등을 실행한다. ※ 함수 컴포넌트의 body에서는 값의 계산을 하고 이외의 작업( fetch request, DOM 직접 조작, 타이머 함수등)을 정의하지 않는것이 기본이다. 위의 작업을 side-effects 라고 부른다. useEffect(callback[, dependencies]);callback : 실행 함수, DOM 업데이트 후에 실행dependencies : 옵션 의존오브젝트 array. 만약 의존오브젝트가 렌더링 사이에 변화가 있다면 callback 함수가 실행된다. dependencies 가 없는 경우 useEffect(() => { // 렌더링이 될때마다 실행.. 2023. 11. 20. 이전 1 2 3 4 5 다음
