728x90 react22 Context API Context API는 리액트 프로젝트에서 전역적으로 사용할 데이터가 있을 때 필요하다. Context API를 사용하지 않는다면 최상위 컴포넌트에서 다른 여러 컴포넌트에서 공통적으로 필요한 state를 관리하고 필요시 props의 형태로 전달한다. 이때 컴포넌트의 구조가 복잡해지면 여러 컴포넌트에 걸쳐서 props를 전달한다. 이는 유지보수성의 저하를 야기하기 때문에 이를 보완하기 위해 Context API 또는 Context API를 기반으로 구현된 리덕스, MobX같은 상태관리 라이브러리를 사용한다. Context API를 사용하면 데이터의 전달을 위해 여러 컴포넌트를 거칠 필요 없이 Context를 만들어 한번에 원하는 값을 받아올 수 있다. /src/contexts에 다음과 같은 코드를 작성하자.. 2021. 7. 17. React에서의 onClick이벤트 리엑트는 HTML/JS처럼 유저가 애플리케이션의 인터페이스와 상호작용을 할때 함수를 호출하고 그에대한 액션을 발동한다. 이러한 상호작용은 이벤트를 발생시킨다 . 클릭 이벤트는 하나의 엘리먼트가 클릭 되었을 때 발동되며 onClick으로 정의된다. 이는 유저의 액션에 대해 작용하고 싶은 엘리먼트의 attribute로 정의 된다. Vanila와 React의 이벤트 헨들링 차이. 1. 바닐리와는 다르게 리엑트는 camelCase를 사용한다(js-onclick, react-onClick) 2. HTML의 요소가 클릭되어 이벤트 헨들러가 함수를 호출한다면 다음과 같이 호출된다. 1 2 3 4 //vanila js Do something; //react Do something; cs 위의 두 코드는 단순 문법 차이.. 2021. 7. 14. 외부 API 연동 axios를 설치하고 다음과 같은 코드를 작성하자. 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 import logo from './logo.svg'; import './App.css'; import React, {useState} from 'react'; import axios from 'axios'; function App() { const [data, setDate] = useState(null); const onClick = async () => { try{ // 가짜 API를 호출할 수 있는 사이트 const response = axios.get('https://jsonplaceholder.typ.. 2021. 7. 12. 리엑트 라우터로 SPA개발하기 기존의 웹 페이지는 여러개의 html파일로 이루어져 있으며 다른 페이지로 이동할 때 마다 매번 새로운 html파일을 받아오고 페이지 로딩마다 서버에서 리소스를 전달받아 해석한 뒤 화면에 보여주었다. 하지만 이런 방식은 제공해야할 정보가 많은 요즘 웹에는 적합하지 않다. 서버측에서 모든 정보를 준비한다면 트래픽 증가, 사용자 증가로 인한 서버 부하가 발생할 수 있다. 물론 캐싱, 압축을 통해 어느정도 해결이 가능하지만 사용자와 인터렉션이 자주 발생하는 모던 웹 어플리케이션에는 적당하지 않다. 따라서 리액트 같은 라이브러리 또는 프레임워크를 통해 뷰 렌더링을 사용자의 브라우저가 담당하도록 하고, 애플리케이션을 브라우저에 불러와서 실행기킨 후에 사용자와의 인터렉션이 발생하면 필요한 부분만 js를 사용해 업데이.. 2021. 7. 8. 이전 1 2 3 4 5 6 다음 728x90
