📌애플리케이션 등록 먼저, 카카오 개발자 페이지에서 애플리케이션을 등록해야 합니다. 등록하는 방법은 아래 링크를 참고하자. 카카오 로컬 API 시작하기 Kakao Developers 카카오 API를 활용하여 다양한 어플리케이션을 개발해보세요. 카카오 로그인, 메시지 보내기, 친구 API, 인공지능 API 등을 제공합니다. developers.kakao.com 📌카카오 로컬 API Javascript SDK 설치 카카오 로컬 API를 사용하기 위해서는 Javascript SDK를 설치해야 한다. 'npm' 패키지 매니저를 사용하여 설치하자. npm install kakao-sdk 📌주소 검색 컴포넌트 구현 import React, { useState } from 'react'; import { KakaoM..
📌개요 최근 회사에서 신규 프로젝트를 진행하는 과정에서 자식 컴포넌트에 있는 데이터를 부모 컴포넌트에 전달해야하는 작업이 필요했다. 예를들어 자식 컴포넌트에서 데이터 입력을 하면 그것을 부모 컴포넌트에서 데이터를 받아와서 다른 자식에게 전달해주는 작업이 필요했던 것이다. 이번 기회를 통해 리액트에서는 부모 자식간의 데이터 전달을 어떤식으로 통신하는지에 대해 알아보도록 하자!! 📌부모에서 자식으로 데이터 보내기 👉 props를 이용한다. props란 데이터를 전달하는 속성으로 부모 컴포넌트에서 설정할 수 있으며, 부모에서 자식으로만 데이터를 줄 수 있다. Parent.js import React, { useState } from 'react' import Child from './Child'; const ..
1. 자동배치 (Automatic Batching) 2.Transitions(전환) 3.Suspense 와 lazy 4. 새로운 Hook 1) useId 2) useTransition, startTransition 3) useDeferredValue 4) useSyncExternalStore 5) useInsertionEffect 4. 새로운 CSR API # React DOM Client 1) CreateRoot 2) hydrateRoot # React DOM Server 1) renderToPipableStream 2) renderToPipableStream 1. 자동배치 (Automatic Batching) React-18v 부터 상태 업데이트(setState)를 하나로 통합해서 배치 처리를 한 ..
React Fragments React에서 컴포넌트가 여러 엘리먼트를 반환하도록 사용하는 것이 일반적인데, Fragment는 DOM에 의미 없는 div를 사용하지 않고 여러 하위 노드들을 그룹화해서 사용할 수 있습니다! render() { return ( ); } 예를 들어 Table과 테이블 아래의 Column을 세팅해주는 컴포넌트가 있다고 가정합니다. class Table extends React.Component { render() { return ( ); } } class Columns extends React.Component { render() { return ( Hello World ); } } 이때 Table의 출력결과는 아래와 같이 나옵니다. Hello World 결과를 보면 tr 아래에..
3. state 리액트에서 state는 컴포넌트 내부에서 바뀔 수 있는 값을 의미한다. Props는 컴포넌트가 사용되는 과정에서 부모 컴포넌트가 설정하는 값이며, 컴포넌트 자신은 해당 props를 읽기 전용으로만 사용할 수 있다. props를 바꾸려면 부모 컴포넌트에서 바꾸어주어야 한다. 예를 들어 현재 상황에서는 App 컴포넌트에서 MyComponent를 사용할 때 props를 바꾸어 주어야 값이 변경될 수 있는 것이다. 반면 myComponent에서는 전달받은 name 값을 직접 바꿀 수 없다. 리액트에는 두 가지 종류의 state가 있습니다. 하나는 클래스형 컴포넌트가 지니고 있는 state이고, 다른 하나는 함수형 컴포넌트에서 useState라는 함수를 통해 사용하는 state입니다. 3.1. 클..
1. 개념 React에서 자주 사용되는 Props와 State의 개념과 차이점입니다. Props란, 컴포넌트가 가지고 있는 프로퍼티로 자식 컴포넌트가 부모 컴포넌트로부터 값을 받고 싶을 때, props를 통해 받아올 수 있습니다. 일반 객체 지향에서 특정 function의 인자(parameter)로 생각하면 좋습니다. 위는 객체 데이터를 표시하거나 변경 사항등을 알리기 위해 사용되며 읽기전용이므로 값을 수정할 수 없다는 특징을 가지고 있습니다. State는 private한 속성을 지니며 컴포넌트에 의해 완전히 제어되고 있다는 특징을 가지고 있습니다. 즉, 컴포넌트 내부에서만 사용할 수 있는 속성인 것이고, Local State라고도 부릅니다 2. Props 우선 MyComponent 컴포넌트를 수정하여 ..
- Total
- Today
- Yesterday
- 이벤트리스너
- vue.js3
- loadbalancer
- http
- reactnative
- Vue.js
- 알고리즘
- 이벤트버스
- store.js
- 로그인 인증
- useState
- Repository pattern
- 더미데이터
- 항해플러스프론트엔드
- Http통신
- 항해플러스후기
- eventListner
- 레포지토리패턴
- 항해솔직후기
- focus와blur
- 빅오표기법
- props
- 디바운싱
- 웹훅
- React18v
- JWT토큰
- event종류
- Vuex
- vue3
- react
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | 5 | 6 | 7 |
8 | 9 | 10 | 11 | 12 | 13 | 14 |
15 | 16 | 17 | 18 | 19 | 20 | 21 |
22 | 23 | 24 | 25 | 26 | 27 | 28 |
29 | 30 |