javascript(42)
-
[React] Key Warnings 해결 방법
Map함수를 사용하여 반복되는 컴포넌트 혹은 JSX 요소 들을 랜더링 하다 보면 key Warning라는 오류가 콘솔창에 뜨는 것을 자주 볼 수 있다. 예시 import React from 'react'; import './App.css'; function App() { const iter = [0,1,2] return ( { iter.map(item => item) } ) } export default App; 해당 소스 코드 입력 후 localhost:3000에 접속하면 개발자 도구(F12)에 이미지와 같은 오류가 뜨는 것을 확인할 수 있다. 에러를 간단히 읽어보면 유니크한 key가 필요함을 알 수 있다. div 안에 iter.map 부분을 아래와 같이 바꾸면 에러가 사라진다. iter.map(ite..
2020.10.19 -
[React] Props와 State 차이점
Props와 State의 차이점 먼저 Props는 상위 계층의 컴포넌트와 데이터 교환을 위해 사용한다. 반면 state는 다른 컴포넌트와 상호 교환의 목적이 아닌 해당하는 컴포넌트의 외부 접근을 고려하지 않고 내부적으로 내부 클래스에서만 사용하는 것이 목적이다. 예시 소스 import React from "react"; // class 선언 class Test extends React.Component { constructor(props) { super(props) this.state = { // 문자, 숫자, 함수 다 정의할 수 있다. lang : 'javascript', date : new Date() } } render() { // render 함수 안에서 state 사용 가능 const { lan..
2020.10.19 -
[React] Lifecycle
Lifecycle은 리액트가 모든 요소들을 view 로 받기 때문에 이 view를 데이터의 단방향을 보장하면서 효과적으로 데이터를 전체적인 틀(클래스) 내에서 단일적으로 관리하기 위한 로직을 마련하는 기능을 함 Rendering 함수를 기준으로 잡고 이전과 이후 시점으로 라이프 사이클을 실행하고 관리하는 기능들이 LifeCycle Method(라이프 사이클 메소드)다. 각각 라이프 사이클 메소드는 this.stat의 사용 가능 여부 또한 정해져 있는데 해당 예는 아래 소스 코드 및 이미지에 나와 있다. 예시 소스 import React from "react"; class LifeCycle extends React.Component { constructor(props) { super(props) } // ..
2020.10.19 -
[React] Rendering(조건별 Rendering)
조건별로 랜더링 하는 예시 소스 import React from 'react'; // 첫 번째 문자는 대문자 // 컴포넌트는 항상 함수를 반환해야 한다. const Loading = () => Loading... // 조건별로 랜더링 // 단일상태로 로딩 상태일 경우만 출력되는 컴포넌트 class LoadingConponent extends React.Component { constructor(props) { super(props) this.state = { // 로딩이 되기 전 loading : false } } render() { const { loading } = this.state return ( { /* 조건별 페이지 랜더링 */ loading && // Loading일 경우에만 출력 } ) }..
2020.10.19 -
[React] JSX와 Fragment
JSX란? React는 모든 것을 View로 본다. 그렇기 때문에 기존의 자바스크립트의 라이브러리와 프레임워크와 다르게 모든 HTML 코드를 자바스크립트 코드 안에 넣는 획기적인 방법이다. 그 기본이 되는 것이 Javascript를 확장하여 마치 XML 문법처럼 만든 것이 JSX다. JSX코드는 HTML과 매우 유사하지만 차이점이 있다. class가 아닌 ClassName으로 표기한다. 항상 camelCase 표기법으로 표기해야 한다. (기존의 onlick을 onClick으로) flagment란? JSX 요소들은 항상 한 개의 컴포넌트로 리턴이 되어야 한다. 그렇기 때문에 똑같은 head를 두 번 나열해서 쓰면 에러가 발생한다. flagment가 등장하기 전에는 div나 span태그로 묶어서 사용했다. ..
2020.10.19 -
[React] React 다섯 가지 특징
1. Virtual DOM 가장 중요한 요소 DOM(Document Object Model) HTML 블록 하나 하나의 요소를 객체(Obeject)라고 하는데 이 객체를 DOM 객체라고 보면 된다. Javascript나 jQuery 라이브러리를 사용하는 경우 DOM에 바로 접근하거나 jQuery 메소드를 사용하여 접근했어야 했다. SPA : Single Page Application 특정한 기능이나 데이터 요청을 했을 때 해당 하는 페이지를 새로고침하거나 이동하는 작업 없이 현재 페이지에서 모든 데이터의 변환 처리과정 이동이 모두 이루어 지는 것 네이버 모바일 페이지를 예로 들었을 때 어떠한 버튼이나 이벤트 실행 시 페이지 전체가 리로드 되면서 DOM 구성이 바뀌게 된다.(F12를 눌러 개발자 도구를 킨..
2020.10.13 -
[Javascript] Singleton Pattern(싱글톤 패턴)
Singleton Pattern (싱글톤 패턴)은 클래스 함수의 인스턴스를 한 개로만 유지하는 것을 말한다. 즉 여러 객체가 생성되더라도 최초 생성된 객체만 사용한다. 활용 사례 express 서버를 초기화할 때 환경 설정 파일을 읽거나 aws에서 환경 변수들을 가지고 있는 객체를 만든다고 가정할 때 싱글톤 패턴을 사용하지 않을 경우 서버에 대한 환경 설정을 계속해서 새로 읽거나 업데이트는 불필요한 작업이 일어남 어떤 객체나 데이터에 대해서 단일성 즉, 최초 한 번만 생성됨을 보장하기 위해서 사용하는 패턴이 싱글톤 패턴 캐시는 기존의 데이터가 있는 것에 대해서 새로 생성하지 않고 바로 사용가능한 것인데, 싱글톤 패턴을 사용하지 않을 경우 캐시 모듈이 항상 생성(초기화)되어서 의미가 없다. 'use str..
2020.10.13 -
[Javascript] Reduce
reduce를 사용하여 array를 편집하고 수정할 수 있음 reduce 는 각각의 요소를 첫 번째부터 혹은 특정 인덱스부터 마지막까지 접근할 때 사용 각각의 배열의 요소를 for문을 통해 배열의 요소를 하나 하나씩 접근 하는 것과 동일한 효과를 볼 수 있지만 가독성, 직관성 측면에서 뛰어남 map과 filter로 두 번 해야하는 연산을 reduce를 사용하여 한 번만 사용할 수 있음 예시 소스 'use strict' const numbers = [10, 20, 30, 40]; // 0부터 시작해서 각각의 배열을 순회하며 다음 값들을 한 번씩 더해 줌 // 명시적으로 초기값을 지정하지 않으면 0부터 시작 const sum = numbers.reduce((tot, val) => tot + val) cons..
2020.10.13