ReactJS/React 200제

[ReactJS] 리액트 200제 _ ex013 ~ 015 ( 화살표 함수, forEach(), map() )

013 화살표 함수 사용하기 화살표 함수 function 대신 =>을 사용하며 retrun 문자열을 생략할 수 있음 ES6에서 등장함 콜백 함수에서 this를 bind 해야 하는 문제도 발생하지 않음 콜백함수 : 다른 코드의 인수로서 넘겨주는 실행 가능한 코드 this : 자신이 속한 객체 또는 자신이 생성할 인스턴스를 가리키는 자기 참조 식별자 this는 함수가 호출되는 방식에 따라 동적으로 결정됨 this 바인딩 : this를 고정시키는 것 참고 문서 https://kamang-it.tistory.com/entry/JavaScript07this-this바인드편bindcallapply import React, { Component } from "react"; class R013_ArrowFunction..

[ReactJS] 리액트 200제 _ ex009 ~ 012 (문자열, 변수, 전개연산자, 클래스)

009 템플릿 문자열 사용하기 ES (ECMA Script) 는 표준화된 스크립트 언어이고, 그 뒤에 붙는 숫자는 버전을 의미한다 2011년부터 ES5가 웹 표준처럼 사용되고 있고, 2015년 발행된 ES6는 자바스크립트가 따르는 기술 규격이다 React도 ES6의 모든 기능을 사용할 수 있다 `hello ${변수명} world` 문자열과 함수 합치기 위해서 백틱과 ${ }를 사용한다 startsWith() 변수 앞에서부터 일치하는 문자열이 있는지 찾는다 endsWith() 변수 뒤에서부터 일치하는 문자열이 있는지 찾는다 includes() 위치에 상관없이 변수에 특정 문자열이 포함돼 있는지 판단한다 return 값 자료형 = Boolean 010 var, let, const 사용하기 var : (ES5..

[ReactJS] 리액트 200제 _ ex006 ~ 008 (생명주기 함수)

06 getDerivedStateFromProps(props, state) 컴퍼넌트가 새로운 props를 받게 되었을 때 state를 변경해줌 constructor( ) 함수 다음으로 실행된다 App.js에서 전달한 prop_value라는 변수를 props.prop_value로 접근해 값 가져옴 보다시피 constructor > getDerived > render 순으로 실행되었다. 07 componentDidMount( ) 생명주기 함수들 중에서 가장 마지막에 실행됨 render( ) 함수가 코드를 화면에 그려준 후 실행됨 화면 그려지는 것이 끝난 후의 이벤트 처리, 초기화 등 가장 많이 활용되는 함수임 08 shouldComponentUpdate() 생명주기 과정 중 component의 변경(prop..

[ReactJS] 리액트 200제 _ ex001 ~ 005

003 component: 특정 코드 뭉치를 다른 부분에 이식하거나 재 사용하기 위해 사용하는 코드 블록 단위 004 생명주기: component의 생성, 변경, 소멸 과정을 뜻함 component 생성 함수 render() constructor() getDerivedStateFromProps() componentDidMount() 005 contructor 함수가 헷갈려 검색해봤다 참고 문서 https://corini.tistory.com/entry/리액트React-학습자를-위한-기초지식-컴포넌트-생명주기 https://www.javatpoint.com/react-constructor contructor(props) 컴포넌트가 실행될 때 가장 먼저 호출되는 함수 생명주기 함수 중 가장 먼저 실행됨 처음..