리액트(15)
-
[React.js]리액트의 가상돔, 리액트 훅 기초
💻 가상돔 매번 돔을 새로 반영하는 것은 비효율적이기에, 가상돔이 사용되는데요. 가상돔을 두어 이전과 비교한 다음에 "변경부분만 돔에 반영"되도록 해줍니다. 📍 JSX 리액트 요소트리 Json타입으로 컴포넌트에 key가 할당되고, 해당 값이 변경될때마다 초기화되어, unmount mount가 진행됩니다. JSX-> 리액트 요소 트리 : 화면의 한 순간을 나타내주는 가상돔으로 사용. { type: 'a' or Component함수, // Dom은 문자열, 컴포넌트는 함수 이름이 들어간다. key: key에 지정된 값, ref: '', props: { children, 다른 속성 키: 값 } //... } 📍 가상돔 렌더, 실제 돔 커밋 💡 렌더단계 렌더링마다 가상돔 만들어지고, 이전과 비교 💡 커밋단계 실..
2021.07.11 -
[React.js]리액트의 상탯값, 속성값, 반환값
리액트를 개발하면서 이론적인 내용들과 기초가 부족하다고 느껴져서 리액트 공부를 시작했습니다👍 강의는 인프런 "실전 리액트 프로그래밍"을 수강하면서 내용을 정리하는 포스팅을 작성하려 합니다. 👉 리액트 코드의 특징 일반 JS코드와 리액트를 사용한 코드를 비교해보면 아래와 같습니다. 🔹 일반 JS /*UI 구현코드*/ 추가 🔹 리액트 import React, { useState } from 'react'; export default function App(){ const [todoList, setTodoList]= useState([]); const [desc, setDesc]= useState([]); function onAdd(){/*생략 */} return( {/*UI 구현코드*/} {setDesc(e..
2021.07.08 -
[우아한 테크러닝 4기] redux 구현해보기
안녕하세요. 이번 포스팅에서는 제가 지금 참여하고 있는 우아한 테크러닝 4기에서 들었던 강의 내용을 다뤄보려 합니다! 이번 강의에서는 redux를 javaScript를 이용하여 간단하게 구현하면서, redux에 대한 개념을 깊이 배워볼 수 있었습니다. 💻 리덕스(redux)란? 제가 생각한 리덕스는 간단하게 정의해보면 "외부에서도 전역적으로 상태관리를 가능하게 해주는 라이브러리"라고 볼 수 있을 것 같아요. 아래 그림처럼, 하나의 리덕스 store라는 곳에 상태 값들을 저장해 두고 외부 컴포넌트에서 접근할 수 있도록 하는 시스템이죠. 간단하게 리덕스에 대해 정리를 하고, 구현으로 넘어가 보겠습니다. 먼저 리덕스에서 사용되는 주 용어는 다음과 같습니다. 🔸 스토어 (Store) 상태 값들을 저장해두는 공간..
2021.07.02 -
[React]구글 Oauth2 로그인 구현 with TypeScript
저는 이번 우아한테크러닝 4기 : 나만의 노션 만들기 (feat.시니어봇)에 운이 좋게 참여하게 되었어요 이 노션 프로젝트는 리액트 typescript를 이용하여 진행되는데 typescript는 처음이라 많이 어색하더라구요 해당 프로젝트에서는 로그인 기능을 구글 인증 API인 Oauth2를 이용하기로 결정되어서 구현한 내용을 토대로 포스팅을 해보려합니다 :-D 먼저 구글 Oauth2 의 document는 아래 링크에서 자세히 볼 수 있어요. https://developers.google.com/identity/protocols/oauth2 OAuth 2.0을 사용하여 Google API에 액세스 | Google ID 플랫폼 | Google Developers 참고 : Google의 OAuth 2.0 구현..
2021.06.09 -
[React] 카카오 Map _지도 생성, 현 위치 재검색 구현 (+카카오 로컬 API)
이번 포스팅에서는 카카오 맵과 카카오 로컬 API 간단한 사용법에 대해서 써보려 합니다 😊 +2023.09.25 내용 업데이트 카카오 맵 API 제가 사용했던 API는 사진과 같이, 위도&경도를 이용하여 지도에 위치를 띄우고, 지도에서 이동 시, 현위치 재검색을 구현했습니다. 지도 생성 먼저 해야할 것은 kakao Developers 사이트에 애플리케이션 등록하여 인증키 [앱키 > JavaScript 키]를 발급받는 것 입니다. (애플리케이션 등록 후 플랫폼까지 등록해야 합니다.) https://developers.kakao.com/ Kakao Developers 카카오 API를 활용하여 다양한 어플리케이션을 개발해보세요. 카카오 로그인, 메시지 보내기, 친구 API, 인공지능 API 등을 제공합니다. ..
2021.05.30 -
[React]리액트 다음 우편번호 검색
웹 개발을 하다보면 우편번호 기능을 사용할 일이 빈번하더라구요. 감사하게도 다음 우편번호 검색 라이브러리가 너무 간단하고 사용하기 편리해서 포스팅에 한번 적어보려고 합니다. 👀 먼저, react-daum-postcode 패키지를 설치해줍니다. npm i react-daum-postcode 코드내용은 react-daum-postcode의 DaumPostCode onComlete 함수로 handleComplete를 사용하였습니다. 이 handleComplete에서는 입력이 끝나면, 주소를 전체 주소(우편번호 포함)로 변환해주어 fullAddress로 반환해줍니다. 이 fullAddress를 원하는 대로 처리하면 됩니다. import REACT, { useState } from 'react'; import D..
2021.05.29