Front-End
-
[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이며 화면에 보여줄 정보(..
-
[React.js] PropsFront-End(Web)/React - 프레임워크(React, Next) 2020. 11. 26. 20:49
🤷 Props(Properties) 란? 컴포넌트의 정보를 가지고 있는 객체(Object)이다. 상위 컴퍼넌트가 하위 컴퍼넌트에게 전달하는 용도로 주로 사용된다.(반대는 불가!) 📒 Props 선언 및 표시 JSX의 속성과 같이 선언할 수 있으며, 'this.props.속성명'으로 render() 함수에서 표현 가능하다. import React from 'react'; import ReactDOM from 'react-dom'; class Greeting extends React.Component { render() { return Hi there, {this.props.firstName}!;// props 표현 } } ReactDOM.render( ,// props firstName 선언 documen..
-
[React.js] Components Interact, Import/ExportFront-End(Web)/React - 프레임워크(React, Next) 2020. 11. 26. 00:28
🤷 Component(컴포넌트)의 상호작용이란? React App은 수많은 컴포넌트들로 구성되어 있으며, 각각이 담당하는 정보의 display가 있다. React가 유행하는 이유는 단순히 UI를 컴포넌트로 구분해서가 아닌, 그들의 상호작용에 기인했음을 알고 시작했다. 📒 Component Interact 클래스형 컴포넌트의 render() 함수는 JSX뿐만 아니라, 다른 컴포넌트도 반환할 수 있다. class OMG extends React.Component { // JSX() return render() { return Whooaa!; } } class Crazy extends React.Component { // Component(OMG) return render() { return ; } } 이렇듯..
-
[React.js] Component 기본Front-End(Web)/React - 프레임워크(React, Next) 2020. 11. 24. 20:54
🤷 Component(컴포넌트)의 이해 React 프로젝트의 UI를 독립적이고 재사용이 가능하도록 나눈 최소 단위를 Component라고 한다. (반복적인 패턴구현 용이) Javascript 함수와 유사하다. 'props'라는 입력을 받은 뒤, React element를 반환한다고 이해하자. * 컴포넌트는 단순한 템플릿이 아님! - 주어진 데이터를 반영한 UI를 구성하며, Lifecycle API로 켤 때, 변할 때, 꺼질 때 각각 구현도 가능! - UI / UX 개념과 차이점 UI(User Interface): 사용자가 App을 사용할 때 마주하는 디자인, 레이아웃, 인터페이스 등 기술적인 부분을 얘기한다. 단순히, 보여지는 화면만을 얘기하는게 아니라, 폰트/칼라/줄간격 같은 세부요소 및 반응형/애니메..
-
[Javascript] 변수(Variable) & 자료형(Type)Front-End(Web)/Javascript 2020. 11. 24. 01:56
Wecode 2주차(Javascript) 미션 겸, 변수 및 자료형 복습을 위함. 💛 변수(Variable) 1. 변수(Variable) 란? 프로그래밍 언어에서, 메모리의 위치를 가진 이름값을 의미한다. (자료를 담고 있다는 개념) 변수를 선언하는 방법은 var, let, const 3가지가 있다. var a = 1; let b = 2; const c = 3; 2. 변수 선언방법: var, let, const - var ES5까지 사용되던 변수 선언방법. 수정가능. Functional Scope. 전역변수처럼 반영되어 아래와 같은 성질로 인해 정교성이 떨어진다. 한 Scope 내에서도 같은 이름의 변수를 재선언할 수 있다. 함수처럼 Hoisting 되어, 변수 선언 전에도 이미 변수가 존재하는 것으로 ..
-
[React.js] JSX(Syntax extension for JS)Front-End(Web)/React - 프레임워크(React, Next) 2020. 11. 23. 23:44
🤷 React.js 사용하는 이유 [빠름, Virtual DOM] React is fast. Apps made in React can handle complex updates and still feel quick and responsive. [간결함] React is modular. Instead of writing large, dense files of code, you can write many smaller, reusable files. React’s modularity can be a beautiful solution to JavaScript’s maintainability problems. [대용량에 유리] React is scalable. Large programs that display a ..