react

안녕하세요 오늘은 React + TypeScript 환경에서 Kakao Map API 연동하는 방법에 대해서 설명해드리겠습니다. 1. Kakao Map API Key 발급하기 아래 사이트에서 애플리케이션 추가하기 버튼을 클릭해 추가한 뒤 API key를 발급받습니다 https://apis.map.kakao.com/web/ 그럼 다음과 같이 발급받은 앱 키 중에 Javascript 키를 선택합니다. 2. .env 파일에 키 추가하기 REACT_APP_KAKAO_API_KEY = 발급받은 키 이런식으로 .env 파일에 발급받은 키를 넣어줍니다. 3. 지도를 담을 파일 생성하기 저는 KakaoMap.tsx 파일을 추가해주었습니다. import React, { useEffect } from 'react' imp..

Redux 1. Redux Javascript 상태 관리 라이브러리 Action : 애플리케이션에서 상태 변경을 발생시키는 객체. 일반적으로 Javascript객체이며, **type**필드와 payload 필드를 가짐. type 은 액션의 종류를 식별하는 문자열 Reducers : 이전 상태(state)와 액션(action)을 인자로 받아 새로운 상태를 반환하는 함수. 리듀서는 불변셩을 유지해야 하므로 이전 상태를 직접 수정하지 않고 복사본을 만들어 상태를 업데이트 함 Store : 애플리케이션의 상태를 보유하고 액션을 디스패치하여 상태 변경을 트리거하는 역할. 단일 스토어로 애플리케이션 전체의 상태를 관리하며, 스토어를 생성하고 초기 상태를 설정하는 데 사용 Dispatch : 액션을 스토어에 보내 상..

💡 결론 : React에서 key를 사용하여 엘리먼트 혹은 컴포넌트의 변화를 감지해 효율적인 DOM 사용을 위해서 1. 자식에 대한 재귀적 처리 DOM 노드의 자식들을 재귀적으로 처리할 때, React는 기본적으로 동시에 두 리스트를 순회하고 차이점이 있으면 변경을 생성한다. Duke Villanova // 변경 Connecticut // 자식요소 추가 Duke Villanova 위와 같은 경우 React는 Duke와 Villanova 종속 트리를 그대로 유지하는 대신 모든 자식을 변경 (다시 렌더링)한다. React 입장에서 컴포넌트를 반복해서 렌더링 하는 일은 매우 비효율적임! Keys 자식들이 key를 가지고 있다면, React는 key를 통해 기존 트리와 이후 트리의 자식들이 일치하는지 캐치할 수..

Props Drilling 1. Props 상위 컴포넌트가 하위 컴포넌트에 값을 전달할 때 사용(단방향 데이터 흐름) 자식 컴포넌트에서 프로퍼티는 수정할 수 없음 (읽기 전용) 2. Props Drilling props를 오로지 하위 컴포넌트로 전달하는 용도로만 쓰이는 컴포넌트들을 거치면서 React Component 트리의 한 부분에서 다른 부분으로 데이터를 전달하는 과정 import React from "react"; import "./styles.css"; export default function App() { return ( ); } function FirstComponent({ content }) { return ( I am the first component; | ); } function S..

React 라이프사이클 생성 ➡️ 업데이트 ➡️ 제거 클래스 컴포넌트는 라이프사이클 메소드를 활용함 함수형 컴포넌트는 Hook을 활용함 React 라이프사이클 메소드 마운트 (생성) : 컴포넌트의 인스턴스가 생성되어 DOM에 삽입될 때 순서대로 호출 constructor() : 컴포넌트를 새로 만들 때마다 호출되는 클래스 생성자 메소드 this.prop, this.state에 접근할 수 있으며 리액트 요소 반환 setState를 사용할 수 없으며 DOM 에 접근해서는 안됨 getDerivedStateFromProps() props에 있는 값을 state에 동기화 시킬 때 사용하는 메소드 render() UI를 렌더링하는 메소드 componentDidMount() 컴포넌트가 웹 브라우저 상에 나타난 후 즉..