React 검색 결과
5 개의 검색 결과가 있습니다.
WebStudy

React Router

Single Page Application 라우팅을 클라이언트가 담당 라우팅: 어떤 주소에 어떤 UI를 보여줄지 결정하는 것 클라이언트가 웹페이지에 처음 접속하게 되었을 때 UI에 대한 코드를 미리 준비해 놓고 그 후 경로가 이동되면, 바로 보여줄 수 있으며, 만일 데이터가 필요한 경우 필요한 데이터만 서버에 요청하여 사용할 수 있다. 이점 서버에서는 서버 자원을 아낄 수 있음 클라이언트에서는 더 나은 사용자 경험을 누릴 수 있다. 단점 앱의 규모가 커지면 JS 파일의 크기가 너무 커질 수 있다. 해결책: Code Splitting 브라우저에서 js가 구동되지 않으면 UI를 볼 수 없다 ex) 검색엔진에서 크롤링 불가능 해결책: Server Side Rendering React Router library..

2021. 2. 19. 23:44
WebStudy

React API

axios Rest API를 요청하게 될 때 promise API를 활용하는 HTTP 비동기 통신 라이브러리 REST API 클라이언트와 서버가 소통하는 방식 REST 구성 자원(RESOURCE) - URI 행위(VERB) - HTTP METHOD 표현(Representations) REST 특징 Uniform Interface URI로 지정한 리소스에 대한 조작을 통일되고 한정적인 인터페이스로 수행하는 아키텍처 스타일 Stateless 무상태성 성격 작업을 위한 상태 정보를 따로 저장하고 관리하지 않는다. 세션 정보나 쿠키 정보를 별도로 저장하고 관리하지 안히 때문에 API 서버는 들어오는 요청만을 단순히 처리한다. 서비스의 자유도가 높아지고 서버에서 불필요한 정보를 관리하지 않는다. 구현이 단순해짐 ..

2021. 2. 18. 23:39
WebStudy

React 기본 3

Context API context를 이용하면 단계마다 일일이 props를 넘겨주지 않고도 컴포넌트 트리 전체에 데이터를 제공할 수 있습니다. - Reactjs.org context 없이 props를 전달하여 화면 표시 import React, {createContext, useContext} from 'react'; function Child({text}){ return Hello? {text} } function Parent({text}){ return } function GrandParent({text}){ return } function ContextSample(){ return } export default ContextSample; context를 이용하여 자식 컴포넌트에서 바로..

2021. 2. 15. 22:39
WebStudy

React 기본 2

특정 DOM 선택하기 리액트에서는 ref를 사용 함수용 컴포넌트에서 useRef 사용 클래스형 컴포넌트에서 React.creasteRef() 또는 callback 함수를 사용 커서를 name input란으로 옮기기 input DOM을 선택하여 커서를 옮기자. const nameInput = useRef(); useRef 메소드를 사용한다. 이 input란으로 DOM 선택을 한다. nameInput.current.focus(); reset 시 현재 선택한 DOM으로 이동한다. 전체 코드 import React,{useState, useRef} from "react"; function InputSample(){ const [inputs, setText] = useState({ name: '',..

2021. 2. 13. 23:56
WebStudy

React 기본 1

리액트 설치 JSX 기본 규칙 JSX: 리액트에서 컴포넌트의 생김새를 정의할 때 사용하는 문법 보기엔 html처럼 보이나 실제로는 js이다. babel이라는 도구로 js로 변환해준다. 태그는 꼭 닫혀있어야 한다. 두 개 이상의 태그는 꼭 하나의 태그로 묶어야 한다. div 태그로 묶고싶지 않을 때 Fragment tag 사용 JSX 내부에서 JS값을 보여주고 싶을 때 {변수명}로 묶어준다. style 지정 방법 객체를 생성한다. css 지정 방법 html에서는 class = "name" 으로 지정해줄 수 있었다. 여기서는 className = "name" 으로 지정해 줄 수 있다. 4번 5번 예제 import React from 'react'; import Hello from './..

2021. 2. 12. 23:30