Front-End(Web)/React - 프레임워크(React, Next)
-
[React.js/Side Lib.] PropTypesFront-End(Web)/React - 프레임워크(React, Next) 2020. 12. 1. 20:56
🤷 React.js 프로그래밍을 위한 다양한 스킬들 - 3 지난 포스팅에서는, 거대한 컴포넌트를 프레젠테이션(표현) 사이드와 컨테이너(로직) 사이드로 분할하는 법을 공부했다. 이번엔, propTypes라는 props의 확인 및 검증용 라이브러리에 대해 공부했다. 📒 PropTypes 개념 및 사용목적 props를 확인하는 라이브러리이다. Parent로부터 전달받은 props가 적합한지 점검하는 등 아래 2가지 목적으로 쓰인다. prop validation: props가 적합하게 하달되었는지 확인하는 용도. 없거나 부적합하면 console에 경고 메세지 발생. documentation: props가 컴포넌트들에 전달되기 전 미리 확인하는 속도를 높이는 용도. 📒 PropTypes 사용방법 - 설치: 터미널..
-
[React.js] Components SeperationFront-End(Web)/React - 프레임워크(React, Next) 2020. 12. 1. 18:44
🤷 React.js 프로그래밍을 위한 다양한 스킬들 - 2 저번 포스팅에서는, React에서 사용하는 Inline Styles과, 객체를 변수에 저장하여 활용하는 방법을 공부했다. 이번엔, 랜딩페이지부터 세세한 컴포넌트까지 다양한 JS파일을 분할하는 패턴에 대해 다뤄보고자 한다. 📒 Presentational Component & Container Component 아래 코드는, 기니피그 제목 및 사진(5초마다 바꿈)을 표현하는 페이지이다. 여기서 표현을 위한 페이지(Parent, Container)에서 각각의 기능을 분할(Child, Presentational)하려고 한다. import React from 'react'; import ReactDOM from 'react-dom'; const GUINE..
-
[React.js] Inline StyleFront-End(Web)/React - 프레임워크(React, Next) 2020. 11. 30. 19:19
🤷 React.js 프로그래밍을 위한 다양한 스킬들 JSX는 과 매우 유사하지만, 100% 일치하다고 보긴 힘들다. (props 지정 및 할당을 위한 inline-JS{}) 여기에는, CSS 스타일링도 들어가야 할 것이고, 또 각각의 컴포넌트들을 어떤 파일구조로 제작하는게 효율적일지 아래 포스팅하겠다. 📒 Inline CSS Styles JSX에서 기본적인 CSS 스타일링을 첨가하며, 이는 다음과 같이 작성된다.(double {{}}에 주의하자!) Please style me! I am so bland! 스타일하고자 하는 속성이 많을 경우, 이를 Object 형태로 변수에 저장해도 된다. import React from 'react'; import ReactDOM from 'react-dom'; // 속..
-
[React.js] Stateful vs Stateless ComponentsFront-End(Web)/React - 프레임워크(React, Next) 2020. 11. 29. 19:21
🤷 Component의 다른 분류방법 우리는 컴포넌트의 형식에 따라, 클래스형 컴포넌트 & 함수형 컴포넌트로 분류해서 공부했다. 이 둘의 가장 큰 차이는, 구문형식과 더불어 state의 사용가능 여부에 있었다. (클래스는 가능, 함수는 불가) 이러한 단점의 보완을 위해, 함수형 컴포넌트에는 Hooks 기능이 추가되었다. 반대로, 클래스형 컴포넌트라고 해서 반드시 state를 가지고 있는 것은 아니다. 이에 따라, 컴포넌트를 stateful / stateless 두 종류로도 나누는 것 같다. 이에 대해 공부해보았다. 📒 Stateless & Stateful Component Stateless 컴포넌트(Child)와 Stateful 컴포넌트(Parent)를 클래스형으로 각각 코드해보았다. //📂Child.j..
-
[React.js] Hooks - useEffect()Front-End(Web)/React - 프레임워크(React, Next) 2020. 11. 28. 16:58
🤷 Rendering 후에 사용되는 코드들 컴포넌트가 렌더링된 후에 사용되는 코드들이 있다. 이러한 코드들이 쓰이는 이유는 다음과 같다. 백앤드 사이드에서 변경된 데이터를 패치 데이터의 변동을 확인하기 위함 Timers(setTimeout 등) 및 Intervals(setInterval) 의 운용 위 조건들에 따라 필요시 DOM에 변화를 주기 위해 useEffect() 역시 렌더링 후의 동작을 위해 사용되는 Hooks로, 클래스형 컴포넌트의 Lifecycle 중 componentDidMount(), componentDidUpdate(), componentWillUnmount() 의 기능을 담당한다고 생각하면 된다. 📒 useEffect() useState와 마찬가지로 React 라이브러리에서 import..
-
[React.js] Hooks - useState()Front-End(Web)/React - 프레임워크(React, Next) 2020. 11. 27. 22:54
🤷 state.hooks 함수형 컴포넌트에서도 클래스처럼 state를 사용할 수 있게 해주는 기능이다. (React v16.8에서 추가됨) 클래스형 컴포넌트가 지원기능은 많지만 아래같은 단점들도 분명 존재했다. 매우 난해함(생성자 함수, super(props) 등). 컴포넌트끼리의 연동이 어려움(this 개념). 많은 버그를 유발할 수 있고, 그렇기에 테스팅 시간이 길어진다. 그래서 함수형 컴포넌트에서도 state 등 기존 class 기능을 사용할 수 있도록 지원된 기능이 React Hooks다. useState(), useEffect(), useContext(), useReducer(), useRef() 등이 있다. (Hooks 종류: reactjs.org/docs/hooks-reference.html..
-
[React.js] LifecycleFront-End(Web)/React - 프레임워크(React, Next) 2020. 11. 27. 17:14
🤷 Lifecycle 이란? 리액트 컴포넌트는 생명주기(Lifecycle)를 가진다. (created, rendered, added to DOM, updated, removed) Lifecycle은 크게 세 가지(Mounting, Updating, Unmounting)로 분류할 수 있으며, 아래 그림을 참고하자. 📒 Lifecycle Methods 컴포넌트에는 Lifecycle을 다루기 위한 단계별 메소드들이 존재한다. (v16.3 이전 버전) Mounting: 컴포넌트가 실행되고 DOM에 추가되는 과정이다. 컴포넌트가 실행되면 우선 context, defaultProps, satae를 결정하고, 'componentWillMount' 메소드를 호출한다. 이후 'render'로 DOM에 컴포넌트를 부착하면..
-
[React.js] StateFront-End(Web)/React - 프레임워크(React, Next) 2020. 11. 26. 20:54
🤷 State 란? Dynamic Information은 변화하는 정보를 의미한다. 이러한 Dynamic Information을 React는 실시간으로 렌더링 해야한다. 여기에 쓰이는 두가지 방법이 바로 'Props' 와 'State' 인 것이다. (이외의 컴포넌트 값들은 고정되어있음) Props가 상위 컴포넌트에서 하위 컴포넌트로 보내주는 값이라면, State는 컴포넌트 자기 자신이 가지고 있는 값으로, 변화가 필요할 경우 setState()함수를 통해 값을 변경해줄 수 있다. Props State 읽기 전용(read-only) 비동기 가능 수정 불가 this.setState() 수정 가능 상위에서 하위로 props 전달 하위에서 상위로 event를 통해 전달 모두 Object이며 화면에 보여줄 정보(..