공부하자

https://5ffthewall.tistory.com/71 [React] 리액트 context API의 리렌더링 방지를 통한 성능 최적화 하기 / useMemo 사용하기 https://5ffthewall.tistory.com/67 [React] 리액트 context API로 상태 관리 하기 Context API란? Context API는 React에서 전역적인 상태를 관리하고 컴포넌트 간에 데이터를 전달하는 데 사용되는 기능이다. 이를 통 5ffthewall.tistory.com 전 글에서 말했다 싶이 context API로 상태 관리를 했을 때 문제점에 대한 해결 방안으로 1. useMemo 사용하기 2. Dispatch provider와 Dispatch consumer 분리 가 있었다. 하지만 내부..

https://5ffthewall.tistory.com/67 [React] 리액트 context API로 상태 관리 하기 Context API란? Context API는 React에서 전역적인 상태를 관리하고 컴포넌트 간에 데이터를 전달하는 데 사용되는 기능이다. 이를 통해 props 전달이 깊은 컴포넌트 트리를 통해 이루어지는 것을 피할 수 5ffthewall.tistory.com 위 글과 같이 context API로 전역 상태를 관리하는 코드를 작성한 적이 있다. 하지만 이 코드에는 문제점이 있는데 바로 Provider의 상태가 변했을때 이를 구독하고 있는 컴포넌트의 경우 일제히 리렌더링이 일어난다는 문제이다. 하위 컴포넌트의 개수가 많아지거나 프로젝트의 규모가 커지면 불필요한 리렌더링이 많아지면서 ..

Context API란? Context API는 React에서 전역적인 상태를 관리하고 컴포넌트 간에 데이터를 전달하는 데 사용되는 기능이다. 이를 통해 props 전달이 깊은 컴포넌트 트리를 통해 이루어지는 것을 피할 수 있다. Props Drilling Problem을 해결하기 위해 생김! 컴포넌트 트리에서 Context라는 거대한 공통 조상을 만들고 그 Context로 부터 데이터를 제공을 받는 방식이다. 별도의 Store을 가지고 있는 FLUX와 비슷한 느낌이 있어서 최근에는 복잡한 문법을 가지고 만들어야 하는 Redux보다는 React의 기본 기능인 Context API를 쓰겠다는 움직임이 생기고 있다고 한다. Context API의 핵심 개념 Context: Context는 React 컴포넌트..

https://developers.kakao.com/ Kakao Developers 카카오 API를 활용하여 다양한 어플리케이션을 개발해보세요. 카카오 로그인, 메시지 보내기, 친구 API, 인공지능 API 등을 제공합니다. developers.kakao.com 카카오에서는 다양한 API들을 제공한다 내가 구현할 것은 JS+리액트로 카카오톡 공유하기 기능을 구현하기! 1. 로그인 후 내 애플리케이션을 등록해준다 2. 플랫폼에는 사이트 도메인을 넣어줌, 배포 전 테스트일 때는 localhost 링크 넣어주기! 3. 구현 방법을 선택한다 API 메소드 - 공유하기 버튼도 만들 것인지 - 내가 만들어둔 버튼에 onclick만 써서 바로 보낼것인지! 메시지 구성 방법 - 기본 메시지 (카카오톡에서 템플릿 제공해..

절대경로를 설정하는 이유 import main from '../../Images/main/main.svg' 이런 식으로 ../을 무한 생성하게 되니까 여러 개 import할 땐 지저분하게 보일 수 있음! 절대경로를 설정해주면 import main from 'Images/main/main.svg' 이렇게 코드를 간단하게 줄일 수 있다! CRA(create-react-app)에서 절대경로 설정하는 방법 1. 최상위 루트에 jsconfig.json파일을 만든다 있는 경우에는 파일 내용을 추가해주면 됨 2. 아래 내용을 추가해준다 { "compilerOptions": { "baseUrl": "src" }, "include": ["src"], "exclude": ["node_modules"] } 3. 서버를 재실..

onClick이랑 onSubmit 차이점이 무엇일까? 난 그동안 모든 이벤트를 onClick으로 처리했는데 두 이벤트 프로퍼티의 차이점을 비교해보고자 한다! onClick이란? - 용도 : 주로 버튼이나 다른 클릭 가능한 엘리먼트에 대한 클릭 이벤트를 처리하기 위해 사용된다. - 이벤트 타입 : 마우스 클릭 이벤트에 반응한다. - 사용법 function handleClick() { // 클릭 이벤트 처리 로직 } Click me 주의사항 : 요소뿐만 아니라 다른 클릭 가능한 엘리먼트에도 사용할 수 있다. onSubmit이란? - 용도 : 주로 폼(form) 엘리먼트에서 전송(submit) 이벤트를 처리하기 위해 사용된다. - 이벤트 타입 : 폼이 제출될 때 발생하는 이벤트에 반응한다. - 사용법 func..

console.log를 찍었는데 이렇게 두 번씩 찍히고 출력되는 경우가 생길 수 있다... 이런 경우 index.js에서 을 감싸고 있는 를 빼준다! import React from 'react'; import ReactDOM from 'react-dom/client'; import './index.css'; import App from './App'; import reportWebVitals from './reportWebVitals'; const root = ReactDOM.createRoot(document.getElementById('root')); root.render( // // ); reportWebVitals(); 이 후 콘솔을 찍어보면 정상 출력되는 것을 확인할 수 있다! 그렇다면 왜 그..

아래 책을 읽고 정리한 내용입니다. https://m.yes24.com/Goods/Detail/87631428 Do it! 리액트 프로그래밍 정석 - 예스24 실리콘밸리 리액트 클래스를 그대로 담았다!에어비앤비 프런트엔드 리드에게 배우는 리액트 프로그래밍!전 세계의 뛰어난 개발자들이 모여 일한다는 실리콘밸리! 실리콘밸리에서도 핫한 기업 m.yes24.com 라이브러리 의존성 관리 ⇒ 기존에는 라이브러리 / 모듈 관리가 불편했다…. 기존 자바스크립트의 라이브러리 의존성 관리 방법 알아보기 기존에는 라이브러리나 모듈의 의존성을 script 엘리먼트를 이용해 관리했음 엘리먼트의 선언 순서가 바뀌면 오류가 발생하는 등 문제가 많았음 ES6의 라이브러리 의존성 관리 방법 알아보기 import MyModule fr..

아래 책을 읽고 정리한 내용입니다. https://m.yes24.com/Goods/Detail/87631428 Do it! 리액트 프로그래밍 정석 - 예스24 실리콘밸리 리액트 클래스를 그대로 담았다!에어비앤비 프런트엔드 리드에게 배우는 리액트 프로그래밍!전 세계의 뛰어난 개발자들이 모여 일한다는 실리콘밸리! 실리콘밸리에서도 핫한 기업 m.yes24.com 객체 확장 표현식과 구조 분해 할당 ⇒ 객체나 배열의 특정값을 손쉽게 추출할 수 있는 표현식! ⇒ 배열이나 객체의 값을 해체하여 개별 변수에 할당하는 것 기존 자바스크립트의 객체 확장 표현식 사용 방법 알아보기 // ES5의 예 var x = 0; var y = 0; var obj = { x: x, y: y}; var randomKeyString = ..

아래 책을 읽고 정리한 내용입니다. https://m.yes24.com/Goods/Detail/87631428 Do it! 리액트 프로그래밍 정석 - 예스24 실리콘밸리 리액트 클래스를 그대로 담았다!에어비앤비 프런트엔드 리드에게 배우는 리액트 프로그래밍!전 세계의 뛰어난 개발자들이 모여 일한다는 실리콘밸리! 실리콘밸리에서도 핫한 기업 m.yes24.com 화살표 함수 기본 자바스크립트의 함수 사용 방법 알아보기 function add(first, second) { return first + second; } // typeof add === 'function' var add = function(first, second) { return first + second; }; // typeof add === '..