키모스토리

1. 인라인(inline) styling 적용- html 태그 안에 직접 입력하는 방법. style={ } 형식으로 입력하며, 안에는 json 형식으로 속성명:'속성값' 으로 입력한다.   - 속성명은 케밥 케이스(kebab case)가 아닌, camelCased property names 를 사용한다.      (Html에서 background-color는 react에서 backgroundColor 이다.)   - 인라인 스타일 적용은 가장 높은 우선순위를 갖는다.import React from 'react'export default function App() { return ( 인라인 스타일 입니다. )..

Hook useRef을 사용하면 렌더링 간에 값을 유지할 수 있습니다.업데이트 시 다시 렌더링을 발생시키지 않는 변경 가능한 값을 저장하는 데 사용할 수 있습니다.DOM 요소에 직접 접근하는 데 사용할 수 있습니다.const refContainer = useRef(initialValue); Hook을 사용하여 애플리케이션이 몇 번 렌더링되는지 세어보려고 하면 useStateHook 자체가 다시 렌더링을 발생시키기 때문에 무한 루프에 빠지게 됩니다. 이를 방지하려면 useRefHook을 사용하면 됩니다.import { useState, useEffect, useRef } from "react";export default function App() { const [inputValue, setInputVal..

useMemo다시 렌더링하는 사이에 계산 결과를 캐시할 수 있게 해주는 React Hook입니다.const cachedValue = useMemo(calculateValue, dependencies) 메모이제이션은 값을 캐싱하여 다시 계산할 필요가 없도록 하는 것으로 생각하면 됩니다.성능useMemo을 사용하면 비용이 많이 들고 리소스를 많이 사용하는 기능이 불필요하게 실행되는 것을 방지할 수 있습니다.이 예에서는 모든 렌더링에서 실행되는 비용이 많이 드는 함수가 있습니다.카운트를 변경하거나 할 일을 추가할 때 실행이 지연되는 것을 느낄 수 있습니다. // 성능이 좋지 않은 예import { useState } from "react";import ReactDOM from "react-dom/client"..

문서 : https://ko.legacy.reactjs.org/docs/hooks-effect.html useEffect는 외부 시스템과 컴포넌트를 동기화하는 React Hook입니다.useEffect(setup, dependencies?) Effect Hook을 사용하면 함수 컴포넌트에서 side effect를 수행할 수 있습니다. Hook을 이용하는 예시import React, { useState, useEffect } from 'react';function Example() { const [count, setCount] = useState(0); // componentDidMount, componentDidUpdate와 같은 방식으로 useEffect(() => { // 브라우저 API를..

useState는 컴포넌트에 state 변수를 추가할 수 있는 React Hook입니다.const [state, setState] = useState(initialState)   참고 : https://ko.react.dev/reference/react/useState useState – ReactThe library for web and native user interfacesko.react.dev import { useState } from "react";import "./App.css";import Sub from "./Sub";function App() { console.log("App실행"); // useState : 데이터를 상태값으로 설정 // React안에 hooks 라이브러리 상태값..

App.js (배열데이터를 ,react에서 반복 표시)import "./App.css";function App() { const list = [1, 2, 3]; return ( {list.map((n) => ( {n} // key 속성 추가 ))} );}export default App;