Javascript
-
reduxJavascript/React 2020. 3. 12. 22:43
■redux란? - 복잡하지 않은, 예측 가능한, 중앙 집중적인 상태 저장소 ■redux 구성 요소 store 은행(server) action 입금하는 행위(http call) dispatch 은행 창구 직원(front server) reducer 창구 직원으로부터 전달받은 돈을 계좌에 넣는 직원(api server) state 계좌(db) ■redux의 장단점 한눈에 보기- redux를 안 썼을 때(컴포넌트가 추가될 때마다 2의 지수로 작업이 늘어남) - redux를 썼을 때(컴포넌트가 추가될 때마다 2가지 경우만 추가) ■redux(store,reducer) 초기화 - store를 만들 때, 항상 reducer를 매개변수로 등록해줘야 한다. - 그리고 reducer에서 return할 때, Object..
-
(class 스타일)ShouldComponentUpdate와 PureComponent 그리고 memoJavascript/React 2020. 3. 9. 22:09
class style의 react 문법을 사용할 때 setState({})만 해도 렌더링이 되는 상황이 발생할 수 있다.이 경우엔 ShouldComponentUpdate api를 사용한다. state 값을 디테일하게 비교하여랜더링 시킬지 여부를 결정할 수 있다. 혹은 class extends할 때 Component 대신 PureComponent를 상속해도 비슷한 효과를 자동으로 내게 할 수도 있다. 다만 state 내 값으로 객체 또는 배열이 있는 경우엔 주의가 필요하다. 왜냐하면 객체를 비교할 때에는 주소비교(?)를 하기 때문이다. 꼭 [...prevState, newValue]로 해당 값을 갱신시켜줘야 state가 바뀌었다는 것을 알아차린다. function style에서는 memo api를 사용하여..
-
react,redux 유용 플러그인Javascript/React 2020. 3. 8. 21:41
■React Developer Tools 크롬 웹스토어에서 React Developer Tools를 검색한다. f12 개발자도구의 Components 탭에서 현재 페이지의 react 구조를 확인할 수 있다. 또한 설정의 Highlight updates when components render 를 체크하면 렌더링이 될 때마다화면의 해당 Component의 테두리에 색깔이 생긴다. 이 색깔이 빨강색에 가까워질 수록 자주 렌더링 된다는의미이고, 이는 성능 개선에 도움을 줄 수 있다. ■Redux DevTools
-
webpack 사용해서 react 프로젝트 생성하기Javascript/React 2020. 2. 29. 17:24
■webpack을 왜 쓸까?- 원래는 html 파일 하나만으로도 리액트 프로그래밍이 가능함! 하지만 이는 프로젝트가 매우 작을 경우에나 가능하고 컴포넌트가 많아지면 유지보수 헬파티가 열림 (페이스북은 컴포넌트가 2만개가량 된다고 함 ㄷㄷ...) - 그래서 이 다수의 컴포넌트를 각각 js파일로 분리시키고 이를 종합하여1개의 js 파일로 묶어주는 기능을 Tobias Koppers 가 만듬. 이것이 바로 webpack인것 - js 실행기(?)인 node를 이용해 webpack을 실행시킬 수 있다. ■설치 순서- npm init- npm i react react-dom- i의 의미 : 뒤에 나오는 것들을 설치 - npm i -D webpack webpack-cli- D의 의미 : 뒤에 나오는 것들을 개발 환경에..
-
-
React 입문Javascript/React 2020. 2. 27. 15:11
■리액트 사용 이유- spa를 활용한 사용자 경험 강화- 컴포넌트 재사용을 통한 수월한 유지보수- 가상 dom을 이용한 데이터-화면 일치- 상태(state)가 바뀌면 자동으로 재 랜더링 ■리액트 실행 방법- 초기 - 좀 더 간편하게 jsx(js + xml) 문법을 사용하도록 발전(babel을` 통해 jsx 사용) ■꿀팁- render() 안에는 내용을 최소화하는 것이 좋다. 예를 들어 함수 선언 등등.왜냐하면 render가 자주 일어나게 되면 그곳에 선언된 함수가 계속 선언되는 것!따라서 render 외부에서 함수를 선언하고 render 내부에서 그 함수를 참조하는 것이 효율적 - render() 안의 jsx 태그엔 class, for 키워드를 사용하지 못함. 예약어이기 때문class -> classNa..
-
class 스타일 vs function 스타일(life cycle api)Javascript/React 2020. 2. 26. 18:11
■react의 life cycle- react에서는 render를 main effect라고 부르고 나머지 api를 side effect라고 부른다고 함 ■스타일별 life cycle 사용- class - function- useEffect- componentDidMount, componentDidUpdate와 동일- import 'useEffect' from 'react';- useEffect를 여러번 호출해서 useEffect 내의 매개변수 함수를 다중으로 실행시킬 수도 있다.(어디 스택으로 쌓이는 듯?)`` - cleanUp- useEffect에 전달된 함수에서 또 다른 함수를 return 하면 그 return된 함수는 다음번 useEffect가 실행 되기 전에 실행된다.- useEffect에 전달된..
-
class 스타일 vs function 스타일(props,state)Javascript/React 2020. 2. 26. 18:08
■props 사용- props는 원래 function, class 스타일 모두 사용 가능!- class 스타일 - function 스타일 ■state 사용- class 스타일- function 스타일(hook 사용)- hook은 이름이 use로 시작됨(ex useState(0)) - 원래는 React.useState(0) 이렇게 사용하지만, 상단에 import 'useState' from 'react'를하면 useState(0) 이렇게 바로 사용 가능!- useState는 배열을 반환. [0] -> value, [1] -> setValue 함수- 간편하게 var [value,setValue] = useState(value); 이렇게 쓰기도 함 ■함수형 setState- class 스타일에서 setStat..