React/React 심화 (5) 썸네일형 리스트형 React 심화 기능 )) useReducer 1. 상태 변화 코드란? - 상태 변화 코드 : State값을 변경하는 코드 - 상태 변화 코드를 컴포넌트에서 분리한다 : 컴포넌트 내부에 작성했던 상태 변화 코드를 외부에 작성한다는 뜻 - useState를 이용해 State를 만들면 상태 변화 코드를 분리 할 수 없다. 둘 다 컴포넌트 안에서 선언하기 때문이다. - 하나의 컴포넌트 안에 너무 많은 상태 변화 코드가 있는 경우 가독성을 해쳐 유지 보수를 어렵게 만든다. 2. useReducer의 기본 사용법 - useReducer : useState와 더불어 State를 관리하는 리액트 훅(useState의 대체제라고 할 수 있다.) -useState 와 use Reducer의 차이점 useState useReducer State 관리 컴포넌트 내부 컴.. 리액트 심화 기능 )) 비동기 axios [ axios 사용하기 ] axios.post(요청할 url, 삽입할 데이터 객체) : POST요청을 보내 원하는 값(token) 얻기 case 1 )) 가독성이 좋은 방식 (useEffect ( ) 내부에 쓰기) axios.post(url, data).then( ).catch( ) const URL = 'www.tistory.com' const DATA = { email: test@tistory.com, password: 1234 } useEffect(( )=>{ axios .post(URL, DATA) .then(function (response) { console.log(response); setResult(response.data.token); } ) .catch(function (error){ .. 리액트 심화 기능 )) 페이지 라우팅 1. 라우팅의 기본 개념들 1) 라우팅 라우팅은 경로를 의미하는 Route와 진행을 의미하는 ing가 합쳐진 단어 : '경로를 지정하는 과정' 라우팅 : 데이터 전달을 목적으로 최적의 경로를 찾아 데이터를 전송하는 과정 예로들면 메시지 데이터는 휴대폰에서 휴대폰으로 바로 전송하는 것이 아닌, 중간중간 설치된 라우터라 불리는 장비를 거친다. 데이터를 한 번에 전송하기에는 물리적으로 거리가 너무 멀기 때문이다. 라우터도 현재 위치에서 가장 빨리 이동하는 경로를 찾아 메시지를 전송한다. 2) 페이지 라우팅 페이지 라우팅 : URL요청경로에 따라 적절한 페이지를 반환하는 일련의 과정 경로 : URL에서 .com/ 뒤에 붙는 것을 '경로'라고 한다. 경로에 아무것도 표시하지 않으면 웹서비스는 시작페이지를 보여준다.. 리액트 심화 기능 )) react-router 1. react-router 1) react-router react-router는 declarative routing for React라는 모토를 가진다. => 이 방식을 선호해야 한다. * JSX방식 (Imperative의 반댓말) * History API방식 handleClick = () => push('/login') React의 JSX를 이용하거나, History API를 사용하여 라우팅을 구현한다. 웹에서는 react-router-dom을 사용한다. (다른 리액트 라우터의 경우 react-router-native를 사용.) 적용 시 서버의 모든 path에서 같은 앱을 서빙하도록 해야 한다. 2) react-router의 기능 React 컴포넌트를 특정 path와 연결하면, 해당하는 path로 진.. 리액트 심화 기능)) SPA, 라우팅 1. MPA(Multi Page Application) 1) MPA란? 서버에 미리 여러 페이지를 두고, 유저가 네비게이션시 요청에 적합한 페이지를 전달하는 방식 미리 서버에서 전체 페이지를 빌드해 브라우저로 전송한다. 서버에 라우팅을 처리하는 기능이 있고, 서버에서 여러 페이지를 관리한다. 페이지 요청마다 모든 리소스를 다시 받아오기때문에 페이지 간에 데이터를 재활용하기가 힘들다. 2. SPA(Single Page Application) 1) SPA란? SPA는 하나의 페이지 요청으로 전체 웹앱을 사용하는 방식 라우터로 처리하기 때문에 또 다른 페이지를 요청하지 않는다. 유저는 웹페이지를 모바일 앱 같은 경험을 느낀다. 진화된 웹의 형태 2) SPA의 기술적 장점 서버에서 페이지를 만들 필요가 없기때문.. 이전 1 다음