728x90 반응형 Programming/React.js14 14. Redux로 React app 상태 관리 Counter와 Todo component를 만들자. Counter.js import React from ‘react‘; const Counter = ({ number, onIncrease, onDecrease }) => { return ( {number} +1 -1 ); }; export default Counter; Todo.js import React from ‘react‘; const TodoItem = ({ todo, onToggle, onRemove }) => { return ( 예제 텍스트 삭제 ); }; const Todos = ({ input, // 인풋에 입력되는 텍스트 todos, // 할 일 목록이 들어 있는 객체 onChangeInput, onInsert, onToggle, onR.. 2022. 10. 26. 13. Redux 전역 상태를 관리할 때 ContextAPI도 사용할 수 있지만, 리덕스를 사용하면 상태를 체계적으로 관리할 수 있다. 코드 유지 보수성, 작업 효율, 미들웨어 기능 제공을 통한 비동기 작업 관리 측면에서 좋다. 1. Action : 상태에 어떤 변화가 필요하면 발생한다. - action 객체는 type 필드를 반드시 갖고 있어야 한다. (action의 이름과 같은 역할) 2. Action 생성 함수 : action 객체를 만들어 주는 함수이다. 어떤 변화를 일으켜야 할 때마다 액션 객체를 만들어야 한다. function addTodo(data){ return { type:'ADD_TODO', data }; } 3. Reducer : 변화를 일으키는 함수, 액션을 만들어서 발생시키면 reducer가 현재 .. 2022. 9. 17. 12. ContextApi 기존 컴포넌트간에 상태를 교류해야할 때 무조건 부모 -> 자식 흐름으로 props를 통해 전달하였는데, 이제는 ContextAPI를 통해 더 쉽게 상태를 교류할 수 있다. 프로젝트 컴포넌트 구조가 간단하고 다루는 상태 종류가 많지 않다면 Context를 사용할 필요는 없지만 전역적으로 사용되는 상태가 있고 컴포넌트 개수가 많은 상황에서 유용하게 사용할 수 있다. 아래에서 App-H-J , App-A-B-F, App-A-B-E-G 로 접근하던 것을 바로 접근할 수 있다. Consumer 우선 프로젝트를 새로 생성한다. yarn create react-app context-tutorial 다음 파일들을 생성한다. - src/contexts/color.js import {createContext} from '.. 2022. 9. 14. 11. 라우터로 SPA 개발하기 SPA : Single Page Application의 약어로 한 페이지로 이루어진 애플리케이션을 말한다. 이전까지는 사용자가 다른 페이지로 이동할 때마다 새로운 html을 받아 오고 페이지를 로딩할 때마다 서버에서 리소스를 전달받아 해석한 뒤 화면에 보여주었다.(화면을 서버측에서 준비) 요즘은 웹에서 제공되는 정보가 많기 때문에 새로운 화면을 보여줄 때마다 서버 측에서 모든 뷰를 준비한다면 성능의 문제가 발생할 수 있다. (ex. traffic많거나, 사용자몰려서 서버에 높은 부하) 캐싱과 압축을 해서 서비스 제공하면 최적화는 가능하지만 바뀌지 않는 부분까지 새로 불러와서 보여주어야 하는 불필요한 로딩도 있기 때문에 비효율적이다.그래서 뷰 렌더링을 사용자의 브라우저가 담당하고, 앱을 브라우저에서 불러와.. 2022. 9. 8. 10. immer사용하여 불변성 유지하기 불변성을 유지하면서 상태를 업데이트하는 것은 렌더링 관점에서 중요하다. 하지만 객체의 구조가 깊어지면 불변성을 유지하면서 이를 업데이트 하는 것이 어렵기 때문에 immer 라이브러리를 통해 짧게 구현할 수 있다. (필수는 아니다) 1 ) immer 설치 yarn add immer 2 ) file 생성 import {useRef, useCallback, useState} from 'react'; import './App.css'; function App() { const nextId = useRef(1); const [form, setForm] = useState({name: '', username: ''}) const [data, setData] = useState({ array: [], uselessV.. 2022. 8. 31. 9. 컴포넌트 성능 최적화 Todo App에서 todo list를 많이 만들면 렌더링을 많이 하기 때문에 속도가 느려진다. 이를 정량적으로 확인해보자. app 실행 후 개발자도구에서 Profiler를 클릭하면 왼쪽 상단에 파란색 녹화버튼이 있다. 녹화 버튼을 누른 후, 할 일 ~ 을 클릭한 뒤, 다시 녹화버튼을 눌러 녹화를 종료한다. 그러면 우측에 Render duration 값을 확인할 수 있다. 이는 리렌더링에 소요된 시간을 의미한다. 두 번째로, Ranked 버튼을 클릭하면 리렌더링된 컴포넌트를 오래 걸린 순으로 정렬하여 나열해준다. 이 차트를 통해서 해당 컴포넌트와 관계없는 컴포넌트들이 리렌더링 되고 있는게 아닌지 확인도 가능하다. 그렇다면,, 느려지는 원인을 분석해보자! 컴포넌트는 언제 리렌더링 될까? 1 ) 자신이 전달.. 2022. 8. 24. 8. Component styling 새로운 프로젝트를 만들자. yarn create react-app styling-react CSS CSS 클래스가 중복되지 않게 만들기 위해서 1 ) 이름을 지을 때 특별한 규칙을 사용하여 짓거나 2 ) CSS Selector를 활용할 수 있다. 그 중 BEM Naming은 해당 클래스가 어디에서 어떤 용도로 사용되는지 명확하게 작성하는 방식이다. css Selector를 사용하면 CSS 클래스가 특정 클래스 내부에 있는 경우에만 스타일을 적용할 수 있다. 예를들어 .App .logo{ }는 App의 logo에만 스타일이 적용된다. Sass(Syntactically Awesome Style Sheets) CSS 전처리기로 복잡하 작업을 쉽게 할 수 있도록 해주고, 스타일 코드의 재활용성을 높여주고, 코드.. 2022. 3. 8. 7. Hooks useState 기본 sate 사용 예제 - App.js import Counter from './Counter'; const App = () => { return ; }; export default App; - Counter.js import {useState} from 'react'; const Counter = () =>{ const [value, setValue] = useState(0); return( 현재 카운터 값은 {value} 입니다. setValue(value + 1)}> +1 setValue(value - 1)}> -1 ) } export default Counter; 여러개의 state 사용하기 -App.js import Info from './Info'; const App = ().. 2022. 3. 6. 6. component의 lifecycle method 모든 컴포넌트의 수명은 렌더링 되기 전인 준비 과정 ~ 페이지에서 사라질 때 까지이다. lifecycle method는 class형 컴포넌트에서만 사용할 수 있고 함수형 컴포넌트에서는 hook을 사용한다. lifecycle method 종류 - will 접두사가 붙은 메서드 : 어떤 작업을 작동하기 전에 실행 - did 접두사가 붙은 메서드 : 어떤 작업을 작동한 후에 실행 lifecycle - mount : 페이지에 컴포넌트가 나타남, DOM이 생성되고 웹에 나타난다 constructor : 컴포넌트를 새로 만들때마다 호출되는 클래스 생성자 메서드 getDerivedStateFromProps : props에 있는 값을 state에 넣을 때 사용하는 메서드 render : 우리가 준비한 UI를 렌더링 c.. 2022. 3. 6. 5. 반복적으로 Component 사용하기 예제 1 - App.js import { Component } from 'react'; import './App.css'; import IterationSample from './IterationSample'; class App extends Component { render(){ return( ); } } export default App; 아래와 같이 반복되는 배열이 있다고 할 때, map을 사용해서 코드를 배열로 작성할 수 있다. - IterationSample.js const IterationSample = () =>{ return( // 반복적으로 li생성 눈사람 얼음 눈 바람 ) } export default IterationSample; const IterationSample = () =>{.. 2022. 3. 5. 이전 1 2 다음 728x90 반응형
