본문 바로가기

FrontEnd30

class 사용하기 객체의 표현 객체는 상속을 통해 코드를 재사용할 수 있게 해준다. ES5 자바스크립트에서는 객체를 구현하기 위해 prototype을 사용한다. ES6에서 등장한 class는 prototype과 같은 개념인데, 쉽게 읽고 표현하기 위해 고안된 문법이다. 자바스크립트에서는 함수를 객체로 사용할 수 있다. 예제코드 App.js import React from 'react'; import './App.css'; import ClassPrototype from './R012_Class&Prototype'; function App() { return ( Start React 200! css 적용하기 ); } export default App; R012_Class&Prototype.js import React, {C.. 2022. 6. 26.
전개 연산자 사용하기 전개 연산자 전개 연산자는 배열이나 객체 변수를 좀 더 직관적이고 편리하게 합치거나 추출할 수 있게 도와주는 문법이다. 변수 앞에 …(마침표 3개)를 입력해서 사용한다. 배열 합치기 ES5 기존 ES5에서 배열 2개를 합치기 위해선느 배열 각각에 인덱스로 접근해 값을 가져오거나 concat 함수를 이용한다. varArray1, varArray2 배열에 각각 인덱스 (0,1)로 접근해 인자 값(num1, num2, num3, num4)을 가져와 새로운 배열 sumVarArr에 하나씩 넣는다. ES6 ES6에서는 전개연산자 …(마침표 3개)을 배열 앞에 붙여 여러 개의 배열을 합칠 수 있다. sumLetArr 배열의 값을 추출해 개별 변수에 넣는다. 순서대로 변수 sum1에 sumLetArr[0] 값, su.. 2022. 6. 26.
React의 생명주기-변경 React에서 생명주기란 comopnent의 생성, 변경, 소멸 과정을 뜻한다. 변경 shouldComponentUpdate() shouldComponentUpdate() - component의 ‘변경’과정에 속한다. -‘변경’이란 porps나 state의 변경을 말한다. -componentDidMount() 함수는 ‘생성’ 단계의 생명주기 함수 중 가장 마지막으로 실행된다. -tmp_state2라는 state 변수에 true라는 boolean 유형의 데이터를 세팅했다. -setState() 함수는 변수의 선언과 초기화를 동시에 실행한다. -line18에서 state의 변경이 발생했기 때문에 ‘변경’ 단계의 생명주기 함수 shouldComponentUpdate()가 실행된다. -shouldComponen.. 2022. 6. 23.
React의 생명주기-생성 React에서 생명주기란 comopnent의 생성, 변경, 소멸 과정을 뜻한다. 생성 render() constructor() getDerivedStateFromProps() componentDidMount() render() return되는 html 형식의 코드를 화면에 그려주는 함수이다. 화면 내용이 변경돼야 할 시점에 자동으로 호출된다. Constructor() constructor(props) 함수는 생명주기 함수 중 가장 먼저 실행되며, 처음 한 번만 호출된다. component 내부에서 사용되는 변수(state)를 선언하고 부모 객체에서 전달받은 변수(props)를 초기화할 때 사용한다. super() 함수는 가장 위에 호출해야 한다. getDerivedStateFromProps() getDe.. 2022. 6. 23.

티스토리툴바