useRef 변수 관리 시 사용 특정 DOM 선택 시 사용 state를 사용해서 state가 변경되면 컴포넌트가 다시 렌더링 됨 하지만 ref를 사용하면 렌더링 되지 않음 자바스크립트 getElementById, querySelector 같은 DOM Selector 함수를 사용해 DOM을 선택함 리액트 ref를 이용해 DOM을 선택함 DOM을 직접 선택해야 하는 경우 요소에 포커스를 설정해 주어야 할 경우 요소의 크기를 가져와야 할 경우 스크롤바 위치를 가져와야 할 경우 ... useRef 사용법 useRef()를 이용해 Ref 객체를 만듦 이 객체를 특정 DOM애 ref 값으로 설정함 Ref 객체의 .current 값이 특정 DOM을 가리키게 됨 // Ref 객체를 만듦 const ref = useRe..

Debounce 미리 정의한 시간 동안 이벤트의 처리를 지연시키고 미리 정의한 시간이 지난 후에 한 번에 반영을 해줌 hooks/useDebounce.jsx 생성 export const useDebounce = (value, delay) => { const [debouncedValue, setDebouncedValue] = useState(value); useEffect(() => { // 미리 정해진 딜레이 시간이 지난 후 업데이트함 const handler = setTimeout(() => { setDebouncedValue(value); }, delay); // timeout 호출 도중에 vale/delay가 변경되어 다시 호출되면 이전 타이머를 제거함 return () => { clearTimeo..

React Router Dom 웹 앱에서 동적 라우팅을 구현 가능하게 해주는 라이브러리 컴포넌트 기반 라우팅을 용이하게 함 Single Page Application (SPA) 리액트는 SPA이기 때문에 하나의 index.html 템플릿 파일을 가짐 자바스크립트를 이용해 컴포넌트들을 이 하나의 템플릿에 넣어 페이지를 변경함 이때 React Router Dom 라이브러리가 새 컴포넌트로 라우팅/검색을 하고 렌더링에 도움을 줌 React Router Dom 설치 npm install react-router-dom --save import { BrowserRouter } from 'react-router-dom'; const root = ReactDOM.createRoot(document.getElementB..

src/api/axios.js 파일 생성 axios 인스턴스 생성 후 export import axios from 'axios'; const instance = axios.create({ baseURL: 'https://[API 주소]', params: { api_key: '[API 키]', language: 'ko-KR', }, }); export default instance; src/api/requests.js 파일 생성 (예: 영화 검색) 객체에 경로 저장 후 export const requests = { fetchNowPlaying: 'movie/now_playing', fetchTrending: '/trending/all/week', fetchTopRated: '/movie/top_rated'..

const List = React.memo(({ posts, testFunc }) => { console.log('List compoents is rendering'); return ( {posts.map((post) => ( ))} ); }); export const B = ({ message, posts }) => { const testFunc = () => {}; console.log('B compoents is rendering'); return ( B Component ); }; List 컴포넌트가 계속 렌더링됨 List 컴포넌트가 리렌더링 되는 것을 막으려면 useCallback() 을 사용하면 됨 export const B = ({ message, posts }) => { const test..

App.js function App() { const [posts, setPosts] = useState([]); const [value, setValue] = useState(''); useEffect(() => { fetch('https://jsonplaceholder.typicode.com/posts') .then((response) => response.json()) .then((posts) => setPosts(posts)); }, []); return ( setValue(e.target.value)} /> ); } A.js 모든 요소를 하나의 컴포넌트에 export const A = ({ message, posts }) => { return ( A Component {message} {post..