첸첸's devlog

import logo from './logo.svg'; import './App.css'; import { useState, useMemo } from 'react'; function App() { const [list, setList] = useState([1, 2, 3, 4]); const [str, setStr] = useState('합계'); const getAddResult = () => { let sum = 0; list.forEach((i) => (sum = sum + i)); console.log(sum); return sum; }; //list가 변경 되었을 때만 getAddResult()가 실행 될 수 있게 기억 const addResult = useMemo(() => getAddRes..

useRef란? 리액트를 사용하다 보면 focus라던지, 스크롤 설정이라던지 DOM에 직접적으로 접근 해야하는 경우가 생긴다. 그럴 때 사용하는것이 useRef이다. 기본 사용법 1️⃣ useRef()를 사용하여 객체를 만든다. import React, { useRef } from 'react'; const exampleRef = useRef(); 2️⃣ 접근하고자 하는 DOM에 ref 값으로 만들어준 객체 값을 넣어준다. import React, { useRef } from 'react'; const exampleRef = useRef(); const example = () => { return ( ); } export default example; 3️⃣ DOM활용하기 : ref객체의 .current..

리액트에서 기본적으로 다른 components에서 데이터를 전달 받을 때 props를 사용을 한다. 이 props는 자신의 바로 위에 있는 컴포넌트로부터 직접 전달 받아야 한다는 한계가 있다. 부모와 자식의 계층이 한단계 일 때는 크게 상관이 없지만, depth가 깊어지면 자신이 사용하지도 않는 데이터를 전달해줘야하는 경우가 생긴다. 이 때문에 생긴게 useContext API이다. https://ko.reactjs.org/docs/context.html#reactcreatecontext Context – React A JavaScript library for building user interfaces ko.reactjs.org 만약 아래의 사진의 dep2안에 "첸첸의 블로그"라는 문구를 넣으려면 어떻..

리액트를 처음 배우면서 useState는 어렵지 않게 이해 할 수 있었는데, useEffect는 공식문서를 봐도 정확히 이해가 가지 않았다. 그래서 정리해본다.useEffect는 한마디로 말하면 "랜더링이 될 때마다 실행 된다" 이다. 기본형 button 누르면 count의 값이 1씩 증가하는 코드이다. import React, {useEffect, useState} from 'react'; function App() { const [count, setCount] = useState(0); useEffect(()=> { console.log(count); }) const increment = () => { setCount(count+1); } return ( button ); } export defaul..