일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | 5 | ||
6 | 7 | 8 | 9 | 10 | 11 | 12 |
13 | 14 | 15 | 16 | 17 | 18 | 19 |
20 | 21 | 22 | 23 | 24 | 25 | 26 |
27 | 28 | 29 | 30 | 31 |
- CSS
- 코딩테스트
- 프론트엔드개발자
- 코테
- Javascript
- 너비우선탐색
- CS
- 국비지원취업
- js
- DFS
- computerscience
- 백준
- 그리디
- 자바스크립트
- 야놀자
- 컴퓨터공학
- 호이스팅
- github
- 국비지원
- LinkSnap
- 부트캠프
- git
- 패스트캠퍼스
- KAKAO
- cpu
- nodejs
- 알고리즘
- html/css/js
- BFS
- 컴퓨터과학
- Today
- Total
목록FrontEnd/React (27)
My Boundary As Much As I Experienced
JSX코드가 처리되는 과정 JSX는 자바스크립트 코드가 HTML처럼 보이게 만든 일종의 Syntax Sugar일뿐이다. 실제로는 자바스크립트이다. // JSX return Let's get started! // 원시 React? return React.createElement("div", {}, React.createElement("h2", {}, "let's get started"), React.createElement(Expenses, {item: expenses}) ) //최상위 div에는 속성이 없으므로 빈객체{}를 2번째 인자로 제공한다. 위 예시의 아래 부분처럼 실제로 JSX 문법이 나오기 전까진 createElement() 메소드의 체이닝을 계속 했어야 했다. (return문은 단 하나의 값..
메모이제이션 연산의 결괏값을 메모리에 저장해 두고 이전 값과 결과가 동일할 때 재사용하는 기법 그렇다면 react의 메소드들은 어떤식으로 메모이제이션을 하고 있을까? React.memo()는 props의 값으로 변경을 확인을하고 useCallback()과 useMemo()는 dependency 배열 내부의 값으로 변경사항을 확인한다. React.memo() - 컴포넌트 자체를 메모이제이션 - 자체적으로 props값을 비교해서 달라진 부분이 없다면 리액트 DOM에서 비교 작업이 들어가지 않는다. useCallback() - 함수 자체를 메모이제이션 - 자바스크립트에서 함수는 객체로 취급되기 때문에 리렌더링이 일어날 때마다 새로운 함수가 생성 - 자식 컴포넌트의 불필요한 리렌더링을 막기 위해선 useCall..
리액트에서 동적으로 컴포넌트를 추가해주고 싶을 때 map 메소드를 주로 사용한다. 그런데 map 메소드가 순회할 때 JSX코드를 뱉어낼 때 key인자가 없다면 리액트가 개발자 도구에 경고 메시지를 출력한다. 그런데 왜 key props가 필요한지를 알아보자 이유: 렌더링 최적화 Key는 React가 어떤 항목을 변경, 추가 또는 삭제할지 식별하는 것을 돕는다. 만약 Key가 없다면 배열에서 무언가 수정하거나 삭제하면 전체 배열을 다시 렌더링하게 된다. 그러나 Key를 넣어준다면 해당 instance만 수정하거나 삭제하여 불필요한 재렌더를 방지할 수 있다. 주의할 점: map((value, idx) => { return }) 처럼 2번째 인자를 key에 넣는 것도 좋지 않다. 에러를 없애기 위해 임시 방편..
Props를 자손으로 쭉쭉 내려다보내다보면 props가 어디까지 보내지는지 그 깊이를 알기 어려워지는 현상. 3~4개면 어떻게든 파악을 할텐데, depth가 15개 이상이면? props가 어떻게 보내지고 있는지 파악하는 것 자체가 시간이 든다. import React from "react"; import "./styles.css"; export default function App() { return ( ); } function FirstComponent({ content }) { return ( I am the first component; | ); } function SecondComponent({ content }) { return ( I am the second component; ); } fun..
클래스형 컴포넌트 import { Component } from 'react'; export default class MyComponent extends Component { constructor(props) { super(props); this.handleClick = this.handleClick.bind(this); this.state = { count: 0, }; } handleClick() { this.setState({ count: this.state.count + 1 }); } render() { const { count } = this.state; return ( {count} 클릭해보세요! ); } } react 라이브러리에서 제공하는 Component를 import 받아와서 상속 관계를..
- 클래스형 컴포넌트(Class Component)의 단점을 보안하여, 함수형 컴포넌트(Functional Component)를 사용 할 수 있도록 등장한 것이 React Hook(리액트 훅) 리액트 v16.8에 새로 도입된 기능으로, 함수형 컴포넌트(Functional Component)에서 사용되는 몇가지 기술들을 일컫는다. 리액트 훅은 함수형 컴포넌트(Functional Component)가 클래스형 컴포넌트(Class Component)의기능을 사용 할 수 있도록 해주며 대표적인 예로는 useState, useEffect 등이 존재한다. 내장 Hooks - useState - useEffect - useContext 추가 Hooks useReducer (복잡한 컴포넌트들의 state를 관리 -분리..
리액트의 소스코드 import React, { Component } from 'react'; import PropTypes from 'prop-types'; export default class Basic extends Component { static propTypes = { name: PropTypes.string.isRequired, birth: PropTypes.number.isRequired, lang: PropTypes.string, }; static defaultProps = { lang: 'Javascript', }; static contextTypes = { router: PropTypes.object.isRequired, }; state = { hidden: false, }; compo..