본문 바로가기

리액트

[리액트를 다루는 기술] 16. react-router로 SPA 개발 1. SPA - single page application - 클라이언트는 서버에서 컴포넌트 파일을 받고 원하는 페이지를 서버로 다시 받는 것이 아니라 미리 제공 받은 컴포넌트에서 해결-> 이 해결을 위해 라우터가 필요 2. 라우트 경로에 특정값을 넣는 방법 2가지 1) params를 사용2) Querry string을 사용 1) params를 사용-:key 형식으로 설정 - ?를 사용해서 선택적으로 입력할 수 있게 표시 2) Querry string을 사용 ~/About/Something?key=value&anotherKey=value 3. 페이지 이동 - a 태그를 사용하면 안됨- 새로 고침하면서 이동하기 때문- 라우터에 있는 link 컴포넌트를 이용해야함 4. 자바스크립트에서 라우팅 - link 컴.. 더보기
[리액트를 다루는 기술] 15. 리덕스 미들웨어와 외부 데이터 연동 1. 서버의 API를 호출 할 때는 3가지를 고려 1) 로딩: 서버에 요청했을때, 서버가 응답 할 때 까지 로딩상태 설정2) 성공: 해당 요청 사항이 성공했을떄3) 실패: 해당 요청 사항이 실패했을때 2. 미들웨어와 비동기 작업 - 리덕스 미들웨어 -> 액션을 디스패치 했을때 리듀서에서 이를 처리하기 전에 지정된 작업들을 실행 -> 미들웨어는 액션과 리듀서 사이에 중간자 역할-> 액션-> 미들웨어 -> 리듀서 -> 스토어 const loggerMiddleware = store => next => action => { console.log('체크내용(1)');const result = next(action);console.log('체크내용(2)');return result;} 3. 로거 미들웨어 직접 만들.. 더보기
[리액트를 다루는 기술] 14. 리덕스 더 편하게 사용 1. 리덕스를 정석대로 사용할 경우 문제점 - 액션을 만들때 마다 세가지 파일을 수정해야함: 액션 타입, 생성 함수, 리듀서- 전개연산자와 slice 함수로 배열 내부의 원소를 수정하는데 가독성이 낮음 2. 해결방법 - immutable.js- Ducks 파일 구조- redux-actions : 쉽게 액션 생성함수 만들기 3. imimutabel.js let a= 5;let b= 5; let obj1 = { a:1 , b:2}let obj2 = { a:1 , b:2} a === b : 결과값은 trueobj1 === obj2 : 결과값은 false -> 서로 다른 객체이기 때문 let obj3 = obj1obj1 === obj3 : 결과값은 true -> 같은 객체를 가르키기 때문 obj3.c = 3;o.. 더보기
[리액트를 다루는 기술] 13. 리덕스로 리액트 애플리케이션 상태관리 1. 왜? 사용 - 소규모 프로젝트에서는 컴포넌트의 state 기능을 사용해도 충분함-> 상태 객체가 너무 복잡하고 큼-> 최상위 컴포넌트에서 상태관리를 하는 매서드를 너무 맣이 만들게됨-> 하위 컴포넌트에 props를 전달하려면 여러 컴포넌트를 거쳐야 함 - store.subscribe: 함수를 스토어에 구독시킬때- store.getState: 상태를 가져올때 * react-redux가 컴포넌트에서 리덕스를 구독하는 역할을 대신해줌 2. 이번 프로젝트는? - 생서과 제거 버튼이 있음- 생성을 누르면 원이 생김- 원의 색상은 랜덤- 마우스 좌,우 클릭을 통해 숫자와 색상을 변경- 그렇다면 상태는 숫자와 색상 두개를 원 객체 마다 가지고 있지 않을까?-> index, num, color 3. 라이브러리- .. 더보기
[리액트를 다루는 기술] 12. 리덕스 개념이해 1. 리덕스 - 리액트에서 상태를 더욱 효율적으로 관리하는데 사용하는 상태 관리 라이브러리- 상태 관리 로직을 컴포넌트 밖에서 처리함- 리덕스를 사용하면 스토어라는 객체 내부에 상태를 담게 된다. - 리액트에서 만든 상태관리 라이브러리 2. 리덕스 구조 - 컴포넌트에서 액션을 리듀서로보낸다. -> 디스패치- 리듀서는 스토어를 통해 구독한 컴포넌트에 상태를 전달한다. - 컴포넌트 액션 -> 스토어> 리듀서 -> 스토어 -> 구독 된 컴포넌트 - 액션은 객체 형태로 되어있음- 상태를 변화시킬때는 액션 객체를 참조하여 변화를 일으킴- 액션을 전달하는 과정을 디스패치(dispatch)라고 함- 스토어가 액션을 받으면 리듀서가 액션을 기반으로 상태를 상태를 어떻게 변경시켜야 할지 정함 - 액션을 처리하면 새 상태.. 더보기
[리액트를 다루는 기술] 11. 컴포넌트 리랜더링 최적화 1. 크롬 개발자 도구 - HighLight updaet 활성화- 리랜더링 빈도에 따라 하늘색 -> 초록색 -> 노란색 -> 빨간색 2. 리랜더링- shouldComponentUpdate() 3. 확인 예문 - const initialTodos = new Array(500).fill(0).map((foo,index) => ({ id:index, text: '일정${index}', done:false })) 4. 크롬 개발자 도구 Performance 탭 사용 - localhost:3000/?react_pref 5. shouldComponentUpdate ================================== shoudComponentUpdate( nextProps, nextState){return.. 더보기
[리액트를 다루는 기술] 10. 일정관리 p190 ~ p200 페이지 유실 1. PageTemplate 만들기 p202 ~ p207 페이지 유실 2. 구조 - pageTemplate-TodoInput-TodoList 3. 상태관리 - todolist에서 데이터 상태를 정의, todoInput의 상태를 그 내부에 정의 했다면, 새로운 todolist 데이터는 로직을 어떻게 작성? - App에서 관리하는 것이 좋음 p214 ~ p215 페이지 유실 4. id로 배열의 인덱스 찾기 - const { todos } = this.state; const index = todos.findIndex( todo => todo.id === id); 5. 찾은 데이터의 done 값을 반전 시키는 과정에서 ...todos[index] - todos에서 index 부.. 더보기
[리액트를 다루는 기술] 9. 컴포넌트 스타일링 1. 기존- Webpack의 css-loader를 이용하여 일반 CSS를 불러오는 방식- 컴포넌트는 이름을 접두어로 붙였음 2. 종류1) CSS Module2) Sass3) styled-components 3. CSS Module 에서 클래스가 여러개 일때- - 사이에 공백을 두고 합치면 됨 4. classnames 라이브러리- 클래스 여러개를 쉽게 합치기 위한 라이브러리- - bind 기능을 이용하면 더 편리하게 이용: styles를 생략-> const cx = classNames.bind(styles)-> - 이를 배열 형식이나 객체 형식으로 혼용해서 사용 가능- 객체로 사용하게 된다면 조건부 형식으로 유리하게 사용-> -> isBlue가 true인 경우 실행됨 5. SaSS- syntacticall.. 더보기
[리액트를 다루는 기술] 8. 함수형 컴포넌트 1. class 형태의 컴포넌트- API나 state를 사용할때는 꼭 사용 2. ES6 문법- 비구조화 할당- 화살표 함수 - const hello => ({name}) => { return ( Hello {name} )} * 상기의 형식을 다음과 같이 표현 가능 - const hello => ({name}) => ( Hello {name} )-> {} 괄호와 return 생략 3. 언제 함수형 컴포넌트 사용?- state나 컴포넌트 라이프사이클 API를 사용하지 않는 경우 "파트너스 활동을 통해 일정액의 수수료를 제공받을 수 있음" 더보기
[리액트를 다루는 기술] 7. 컴포넌트의 라이프 사이클 메서드 1. 왜 알아야 하죠?- 컴포넌트를 처음으로 업데이트 할 경우- 컴포넌트를 업데이트 하기 전후로 어떤 작업을 처리해야 할 경우- 불필요한 업데이트를 방지 2. 라이프사이클- 3가지 카테고리: 마운트, 업데이트, 언마운트-> 업데이트: 컴포넌트 정보를 업데이트-> 마운트: 페이지에 컴포넌트가 나타남-> 언마운트: 페이지에서 컴포넌트가 사라짐 3. 마운트- 웹 브라우저 상에서 나타나는 것을 마운트라고 함 4. 마운트 할 뗴 호출하는 매서드- 컴포넌트 만들기-> constructor : 컴포넌트 새로 만들때 마다 호출되는 클래스 생성자 매서드-> getDerivedStateFromProps: prop에 있는 값을 state에 동기화하는 매서드-> render-> componentDidMount: 컴포넌트가 웹.. 더보기

티스토리툴바