TIL_20.05.25(월) - React, ES6

React

제출과 별개로 todo 리스트를 만들어보는 시간을 가졌다.
React 공식문서 꼼꼼하게 읽어볼려고 했는데, 읽는 거 너무 어렵다... ㅜㅜ
내일 다시 차근차근하게 읽어보고 바로 실행도 해보려고 한다.

component

프런트엔드의 라이브러리 또는 프레임 워크에는 자주 사용한는 React, View 등등 이 있는데 그중에서도 가장 많이 사용되는 React에 대한 공부를 진행하였다.

React는 컴포넌트로 구성되는데 컴포넌트는 하나의 의미를 가진 독립적인 단위 모듈을 말한다.

일반 html 태그보다 직관적이고 재사용성을 높일 수 있다.

JSX

컴포넌트는 JSX를 return 해줘야한다.
JSX이 뭔데? 언뜻 보면 html문법과 비슷하나. js의 확장 문법!!

JSX의 규칙

• 반드시 하나의 엘리먼트로 감싸야한다.(div로 전체를 감싼다던지...)
• 내부의 자바스크립트 코드를 적용할 땐 {}(중괄호)사용
• JSX 내부에 if문 사용못함... IIFE 또는 삼항연산자를 사용
• 클래스 이름을 적용할 때, class가 아닌 className을 사용
  ...등등

React의 주요개념

• Data flow - 단방향 데이터 흐름. 부모컴포넌트에서 자식 컴포넌트로 흐른다.
• Props - 상위 컴포넌트가 하위 컴포넌트에게 내려주는 데이터. 그래서 하위 컴포넌트는 사용만 할 수 있고 변경은 불가능하다. Ex) 사용방법 {props.name}(상위컴포넌트에서 지정한 이름이 props의 이름이다.)
• State - 컴포넌트가 갖는 상태, 객테의 형태로 컴포넌트 내에서 보관하고 관리. Class 컴포넌트로 작성되어야 한다. 값을 변경할 땐 반드시 setState 매서드를 사용.
  State 값 변경 -> render()함수가 실행이 된다.
• Life Cycle - 컴포넌트가 생성, 업데이트, 삭제 될 때 일어나는 과정으로, 각 과정 전 후로 특정 메소드가 실행된다.
  • Life cycle (생성) - constructor() -> render() -> componentDidMount()
  • Life cycle(업데이트) - state값 변경 -> render()-> componentDidUpdate()
    라이프 사이클 메서드를 적절히 이용하여 원하는 타이밍에 적절하게 사용할 수 있다.

ES6...!

조금 부족하다고 느낀 ES6 문법들 공부하기!

Restparameter

function add(...args) {
  let result = 0;
  for (let arg of args) result += arg;
  return result
}
//args는 배열의 형태

Spread operator

const arr = [1, 2, 3];
const arr2 = [...arr]; // (3) [1, 2, 3]
const str = 'joykare'
[…str] // (7) ["j", "o", "y", "k", "a", "r", "e"]

Arguments

function someFunction() {
  return arguments;
}
someFunction("joykare", 100, false);
//arguments는 객체의 형태