react5 [REACT] useMemo UseCallback useMemo와 useCallback은 둘 다 React Hooks으로, 최적화를 위해 사용하며, 비슷한 역할을 하는 것 같지만 사용 방법과 목적이 다르기에 공부한 내용을 정리합니다. # Memoization ? 위의 두 hook을 사용하기 전, 메모이제이션이라는 개념에 대해 알아야합니다. 메모이제이션은 함수의 결과를 저장해두고, 동일한 입력이 들어올 때 저장된 결과를 반환하여 재사용하는 최적화 기법입니다. 적재적소에 사용 시, 함수의 성능 향상 및 불필요한 계산을 줄일 수 있습니다. (메모리를 조금 더 사용하더라도 애플리케이션의 성능을 최적화 할 수 있음) # useMemo useMemo는 렌더링 중에 계산된 값을 기억하고, 의존성 배열의 값이 변경되지 않으면 이전에 계산된 값을 반환하는 함수. (메모.. 2024. 2. 12. [React] React Ajax 활용 프로젝트를 진행할 폴더 생성 (예, ajax_prac) $ npx create-react-app '프로젝트명' App.js 에 아래 예시 처럼 코드를 작성했습니다. 먼저 하드 코딩 후, react의 함수형 컴포넌트로 변경하겠습니다. import "./App.css"; function App() { return ( Hello React example 1 example 2 example 3 title desc ); } export default App; 제목과 nav메뉴, 메뉴 선택시 변경되는 하위 아티클의 제목과 내용의 구조입니다. 함수형 컴포넌트로 변경 https://jsonplaceholder.typicode.com/users → 해당 json 데이터를 이용하여 리스트에 출력하겠습니다. 컴포넌트 생성 .. 2023. 10. 9. [React] 리액트로 간단한 게시판 만들기 (simple board/ CRUD) 기본 설정 프로젝트 파일 생성 $ npx create-react-app '프로젝트명' 간단한 레이아웃과 css 적용을 위해 부트스트랩을 사용하겠습니다. (필수 x) 참조 : https://react-bootstrap.github.io/ react bootstrap 설치 $ npm install react-bootstrap bootstrap 상단에 import 합니다. import 'bootstrap/dist/css/bootstrap.min.css'; 필요한 부트스트랩 component도 import. 서버 기본 세팅 XAMPP에서 서버 M SQL DB, Apache server 실행 같은 root에 서버 폴더 생성하고 터미널에 명령어 입력 node express 서버 실행 //패키지 json 설치 $ n.. 2023. 10. 6. [React] Hooks 리액트 훅 리액트 훅(React Hooks)은 함수 컴포넌트에서 React의 상태(state)와 생명주기 기능을 사용할 수 있게 해주는 기능입니다. 이전에는 클래스 컴포넌트에서만 상태와 생명주기를 관리할 수 있었는데, 훅을 이용하면 함수 컴포넌트에서도 이러한 기능들을 사용할 수 있습니다. React Hooks Hooks은 함수형 컴포넌트에서 상태(state) 및 생명주기(lifecycle) 기능을 사용할 수 있게 해주는 기능. (클래스 컴포넌트에서 사용 x) → 장점 : 간결한 코드, 모듈화, 논리의 재사용성. ※ React 16.8.0부터 Hook을 지원. React Native는 v0.59부터 지원합니다. React Hooks 종류 useState : 상태를 추가, 관리할 때 사용. useEffect : 부수 .. 2023. 10. 6. 이전 1 2 다음
