내가 보기 위해 쓰는 것/React.js
-
반드시 공부해야 할 리액트 개념들내가 보기 위해 쓰는 것/React.js 2020. 1. 17. 16:24
회사를 다니게 되서, 자세히 쓸 시간이 언제 날진 모르겠다. 은근히 방대한지라, 개념들의 리스트만 먼저 작성 리액트가 무엇인지에 대한 이해 (CRA 말고 스크립트로만 써보기) JSX에 대한 이해 (JSX 없이 가상돔 작성해보기) 바벨에 대한 이해 웹팩에 대한 이해 ES6+의 주요 문법 (화살표함수, 삼항연산자, 새로운 변수형, 강화된 함수, 비동기처리, 템플릿 리터럴, 제너레이터, 비구조화 등등...) props, state, 컴포넌트에 대한 이해 여러가지 css 작성법 ( Styled Component, Sass, css - module 등 ) 라우팅 ( 히스토리 API, react-router-dom 등 ) 컴포넌트 생명주기에 대한 이해 콘텍스트 API ref 속성값 기본적인 작성법 ( Contain..
-
React.js - 이벤트 Error: Maximum update depth... 해결법내가 보기 위해 쓰는 것/React.js 2019. 10. 29. 15:36
Error: Maximum update depth exceeded. This can happen when a component repeatedly calls setState inside componentWillUpdate or componentDidUpdate. React limits the number of nested updates to prevent infinite loops. onClick 같은 이벤트에서 함수를 부르도록 쓰면 이 에러가 발생할 때가 있다. 그 해결법이다. 예를들어 이런 코드가 있다고 해보자 메뉴 이렇게 쓰면 당첨이다. 왜 Maximum update depth exceeded 가 뜨냐하면... 함수를 부른다 > render를 다시한다 > 또 함수를 부른다 > 반복 함수를 부른다? ..
-
React.js - 하위 컴포넌트에서 상위 컴포넌트 제어하기내가 보기 위해 쓰는 것/React.js 2019. 10. 29. 15:02
프로젝트 진행 중 정말 절망적인 상황이 생겼는데 하위 컴포넌트에서 상위 컴포넌트를 제어해야 하는 상황이었다. 사실 구조를 현명하게 고려하지 않고 진행해서 생긴 상황이다. 이런 방법이 있었다. 상위에서 state를 만들고, 그 state를 바꾸는 함수를 하위 컴포넌트에 props로 넘긴다. import React, { Component } from 'react' import Header from './Header/Header.js' import Section from './Section/Section.js' import Footer from './Footer/Footer.js' export default class Container extends Component { state = { section: 'm..
-
React.js - Container + Presenter 패턴내가 보기 위해 쓰는 것/React.js 2019. 10. 29. 11:06
리액트는 Component 단위로 개발한다. 근데 그거 말고는 딱히 정해진 양식이 없다. 이벤트 제어도 자유 (권장하는 방식이 있긴 있음) css 스타일링도 자유다. 그래서 너무 허허벌판에 서있는 것 같은 느낌이 들어서 디자인 패턴에 대해 하나 알아두면 그나마 규칙성 있는 정돈된 코드를 만들 수 있지 않을까? 그러니까 가장 유명한 방법인 Container + Presenter 패턴에 대해서 아주 간단하게 ARABOJA. 우선 Container + Presenter 패턴에 대해서 한마디로 정의하면 !-! 데이터처리와 데이터출력을 분리 (logic과 presenter를 분리) 그러니깐 Container : API Request, Exception Error, setState... ETC... Presente..
-
CRA의 한계를 풀어보자 (eject)내가 보기 위해 쓰는 것/React.js 2019. 10. 22. 16:35
Create React App이 편리하긴한데 나는 내 포트폴리오에 내 서버를 만드는게 목표니까 기본 제공 기능 말고 서버를 직접 만들어서 연동시키고 싶었다. 근데 이 CRA의 구조가 어떻게 되어있는지도 모르고 어떻게 연동해야하는지도 몰라서 한참 해맸는데 eject라는 기능을 이용하여 숨겨진 구조를 푸는? 그런 행동이 가능했다. 사실 내가 잘 하는 분야도 아니니... 내가 찾아낸 정말 잘 설명된 글의 링크로 대체한다. https://m.blog.naver.com/PostView.nhn?blogId=93immm&logNo=221306747644&proxyReferer=https%3A%2F%2Fwww.google.com%2F 개X같은 windows에서 하는 react.js 개발 (1) / create-reac..
-
React.js - state와 component life cycle내가 보기 위해 쓰는 것/React.js 2019. 10. 22. 10:51
저번에 React에서 가장 중요한 개념이었던 component와 props에 대해 썼다. 그리고 항상 세트로 따라다니는 state와 component life cycle에 대해서 정리해보고자 한다. state는 기본적으로 변수와 비슷한 개념이다. 변수인데 특별한 기능이 주어진 변수라고 생각해도 좋다. 기본적으로 state를 선언하는 법은 아래와 같다. import React, { Component } from 'react' export default class App extends Component { state = { myName: 'I am state!' } render() { return ( Nothing... ) } } 이렇게 state를 생성하고, state를 사용하는 방법은 아래와 같다. im..
-
React.js - component와 props내가 보기 위해 쓰는 것/React.js 2019. 10. 21. 11:09
리액트는 컴포넌트단위로 개발한다. (JSP가 익숙하다면 include의 개념과 비슷하다) 즉 Header, Section, Footer ~ Section의 자식 mainVisual~ 등을 파일을 나눠서 작업할 수 있다. 블럭 여러개를 만들고 조합해서 웹을 완성시키는 방식이라고 보면 된다. 이런 방식에는 여러 장점이 있다. 나중에 다루게 될 component lifecycle에 대해서 분리하여 사고할 수 있다. 단방향 tree구조로 컴포넌트 별로 분리하여 개발이 가능하다. 컴포넌트 방식은 팀단위 작업을 할 때 범위를 명확하게 한다. JSX 를 이용한 Virtual DOM방식이기 때문에 변화되는 Component 빼고는 그대로 둬서 더 효율적이다. 따라서 동적인 웹 페이지일 때 상황에 따라 render가 많..