목록React (29)

끄적끄적

React createRef & useRef ?

HTML 요소에게 id 값이나 class 값을 주어 직접 DOM요소를 조작하는 경우는 매우 많습니다. 하지만 React에서 DOM요소를 직접 컨트롤 하는 것은 좋은 방법이 아니라고 생각합니다. 왜냐하면 컴포넌트 재사용성으로 인해 여러 곳에서, 여러번 쓰일 가능성이 있기 때문입니다. react에서는 dom 요소에 직접 접근할수 있게 해주는 ref 라는 것이 있습니다. ref는 포인터 같은 요소로 요소를 참조할 수 있게 해줍니다. ref는 클래스형 컴포넌트 / 함수형 컴포넌트 임에 따라 사용법이 다르며, 하나씩 살펴보도록 하겠습니다. (ref는 많이 사용하지 않는 것이 좋습니다. ref는 어떤일이 일어날지 예상하기 힘들수 있으며 원하는 모든 동작은 state와 props를 통해 해결할 수 있습니다.) 1. ..
React 2021. 9. 25. 02:12
[Next.JS] NextJS란

Next는 React 전용 프레임워크입니다. React에서 Sever Side Rendering을 쉽게 하기 위해 만들어진 프레임워크입니다. CSR(Clinet Side Rendering) 과 SSR(Server Side Rendering)은 이전의 블로그를 참고해주시면 되겠습니다. ! Next의 특징 ● React에서 SSR을 가능하게 해준다. SPA의 큰 단점 중 하나는 첫 페이지에 빈화면을 먼저 받고 JS파일을 해석하며 화면을 구성하기 때문에 SEO에 가장 큰 문제를 갖고 있습니다. React만으로도 SSR을 구현할 수 는 있지만 매우 복잡하고 까다롭다고 합니다. 이를 Next를 통해 해결할 수 있습니다. 완성된 HTML파일을 처음에 받아오게 하여 맨 처음 화면의 로딩 속도 또한 빠르게 해줍니다. ..
React 2020. 12. 29. 22:56
[React + Recoil] 간단하게 만들어보는 TodoList

오늘은 React에서 만든 상태관리 라이브러리인 Recoil에 대해서 간단히 알아보고 이 Recoil을 이용해 Redux로 만들었던 Todolist처럼 간단한 Todolist를 만들어보겠습니다. ! Recoil이란? Recoil은 페이스북에서 만든 상태 관리 라이브러리입니다. Redux와 Mobx와 같은 전역 상태 관리 라이브러리로 프로그램의 뎁스와 복잡도가 증가함에 따라 편리하게 상태를 관리할 수 있게 해주는 것이죠. 아직 Redux나 Mobx와 같이 많은 인기를 받고 있지는 않지만 페이스북에서 React에 가장 알맞는 상태 관리 라이브러리로 만들어 나간다는 것을 믿다보면 인기를 많이 얻게 될지도 모르겠습니다... 또한, Recoil로 작성을 하게되면 기존의 Redux를 이용하기 위해 필요로 했던 여러..
React 2020. 12. 14. 22:50
[React+네이버지도]React + NaverMaps 사용하여 지도 띄우기

오늘은 React 프로젝트에서 react-naver-maps 라이브러리를 이용하여 지도를 띄우는 법을 포스팅하겠습니다. NCP(Naver Cloud Platform)에서 AI-Naver-API 중 Web Dynamic Map 과 Mobile Dynamic Map을 신청합니다. 인증키 발급 및 등록 과정은 생략하겠습니다! 참고로 가격은 무료이며 길찾기Api를 이용해보고 싶지만 그 기능은 유료라서 못사용해봤네요 ...:( ①. 일단 필요한 패키지를 다운받습니다. npm install react-naver-maps ②. 코드 작성 ...// import { NaverMap, Marker } from 'react-naver-maps'; import { RenderAfterNavermapsLoaded } from..
React 2020. 12. 7. 02:18
[React+Redux]간단하게 만들어보는 TodoList(2)

이제 컴포넌트들을 작성할 시간입니다! 4. App.js 루트 컴포넌트로 MakeTodo와 Todo 컴포넌트를 return 해줍니다. // App.js import React from 'react'; import MakeTodo from './MakeTodo'; import Todo from './Todo'; function App(props){ return( // 할일을 적을 수 있는 컴포넌트 // 할일을 보여주는 컴포넌트 ) } export default App; 5. MakeTodo.js // MakeTodo.js import React, {useState} from 'react'; import { connect } from 'react-redux'; function MakeTodo(props){ c..
React 2020. 11. 27. 02:55
[React+Redux]간단하게 만들어보는 Todolist(1)

오늘은 Redux를 이용한 아주 간단한 TodoList를 만들어보려고합니다. ! Redux가 무엇인지 잘 모르시는 분은 pyolog.tistory.com/7 을 참고하시면 좋을 것 같습니다. 1. 우선 cra(create-react-app)로 리액트 프로젝트를 생성하겠습니다. npx crate-react-app redux_test 2. 먼저 src 폴더 밑에 store를 작성하겠습니다. import { createStore } from "redux"; // 초기 state , 배열에 저장하겠습니다. export const INITAIL_STATE = {todos : []}; //■■■■■■■■■■■■■■■■■■■■■■■ action 정의 ■■■■■■■■■■■■■■■■■■■■■■■■■■■ export fu..
React 2020. 11. 27. 02:34
Prev 1 2 3 4 5 Next