React (23) 썸네일형 리스트형 5.Todo List 앱 리뷰 '한 입 크기로 잘라먹는 리액트' 교재를 보면서 todolist 앱을 만들어 보았다. 추가 버튼을 이용하여 할 일을 추가하고, 할 일 컴포넌트에 있는 삭제버튼을 눌러 할 일 리스트를 하나씩 삭제하는 기능을 만들었다. 또한 검색기능을 통해 내가 추가한 할 일을 검색할 수 있도록 설정하였다. 하지만 코드가 원하는 방향으로 작동하지 않았다. 1. 검색 후 엔터 클릭 시 검색기능이 실행되지 않는다. 2. 할 일을 추가하는 경우 여러개가 아닌 하나의 목록만 추가가 가능하다.(여러 번 등록하면 계속 덮어쓰기가 된다.) 3. 삭제버튼 클릭 시 에러가 발생한다. onDelete is not a function TypeError: onDelete is not a function at onClickDelete (http:.. 리액트 심화 기능 )) 비동기 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){ .. react 기본 기능 )) Hook 비교 [ useEffect, useMemo, useCallback 비교 ] useEffect useMemo useCallback 정의 컴포넌트가 렌더링 될 때마다 특정 작업을 수행하도록 설정할 수 있는 Hook 렌더링 하는 과정에서 특정 값이 바뀌었을 때만 연산을 실행하여 상수에 저장하고, 원하는 값이 바뀐 것이 아니라면 이전에 연산했던 결과를 다시 사용하는 방식 이벤트 핸들러 함수를 필요할 때만 생성할 수 있는 Hook 설명 렌더링 되고난 직후에 실행하며,배열의 값이 마운트되거나 업데이트할 때마다 콜백함수가 실행된다. 배열의 값이 업데이트 될 때마다 호출되는 함수의 값을 상수에 저장한다. 어떤 값이 바뀌었을 때 함수를 새로 생성한다. 코드 사용 useEffect( ( )=>{ 실행문; return ( )=>.. 4. Todo List 컴포넌트 기능 구현(3) 할 일 리스트 렌더링 TodoList [ TodoList( )의 파라미터 ] const TodoList = ({ todo, onUpdate, onDelete }) => { (...) } props를 구조분해 할당한다. [TodoList( )에서 return 된 HTML ] return Todo List {getSearchReuslt().map((work) => { })} input의 value 값으로 {search}props를 할당한다. input 입력시마다 onChangeSearch 함수가 실행된다. 검색결과를 배열로 받는 getSearchReuslt()를 새로운 아이템으로 재배열 한다. todo의 모든 요소를 순차적으로 순회하며 HTML로 변환. work의 모든 프로퍼티를 스프레드 연산자를 이용해 p.. 4. Todo List 컴포넌트 기능 구현(2) 아이템 추가 함수 TodoEditor 컴포넌트 [ TodoEditor( )의 파라미터 ] const TodoEditor = ({ onCreate }) => { (...) } App.js에서 선언한 props객체 ({ onCreate })를 구조분해 할당한다. [ TodoEditor( )에서 return 된 HTML ] return ( 새로운 Todo 작성하기 추가 ) 입력 폼의 value 속성으로 content값을 설정하고, 이벤트 핸들러 onChangeContent를 설정한다. 할 일 입력 폼의 ref에 inputRef를 설정한다. inputRef는 현재값으로 이 요소를 저장한다. Enter키를 눌렀을 때 발생할 이벤트를 설정한다. 버튼을 클릭했을 때 발생할 onSubmit함수를 설정한다. [ Todo.. 리액트 심화 기능 )) 페이지 라우팅 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 2 3 다음