<TIL 20.07.08> React

React 

• UI(User-Interface)를 만들기 위한 JavaScript 라이브러리
• 언어의 구조가 사람의 생각 구조에 가깝게 직관적이라는 점이 큰 장점
• 단방향 데이터 흐름 (부모에서 자식으로 옮기는 것만 가능)

component(컴포넌트) 

- 하나의 의미를 가진 독립적인 단위 모듈

- 컴포넌트 이름은 항상 대문자로 시작

- JavaScript 함수와 유사

 

props(프롭스) 

- 상위 컴포넌트가 하위 컴포넌트로 내려주는 데이터

- 하위 컴포넌트는 사용만 가능하고 변경은 불가

- 프로퍼티의 줄임말

 

state

- 컴포넌트가 갖는 상태

- 객체의 형태로 컴포넌트 내에서 보관, 관리

- class컴포넌트로 작성되어야 함

- 값 변경 시 setState메서드 사용해야 함

- 값 변경 후엔 render()함수가 실행됨 

 life cycle

- 컴포넌트가 브라우저에 보일 때(생성)와, 업데이트, 사라질(삭제) 때 각 단계 전, 후로 특정 메서드가 호출됨

 

JSX

다수의 React 개발자는 JSX(JavaScript를 확장한 문법)라는 특수한 문법을 사용하여 React의 구조를 보다 쉽게 작성한다.

• JSX는 객체를 표현
• React  엘리먼트(element)를 생성
• 태그가 비어있다면 /> 를 이용해 바로 닫기
• 하나의 엘리먼트로 감싸기
• js코드 적용할 땐 {} 사용하기
• JSX내부에서 if문 사용할 수 없음( IIFE or 삼항 연산자 사용)
• 클래스 이름 적용 시 className 사용하기

모든 항목이 렌더링 되기 전에, 문자열로 변환되는 특성으로 인해 XSS (cross-site-scripting) 공격을 방지할 수 있다.

 

Rendering Elements

   element

• React 앱의 가장 작은 단위
• 화면에 표시할 내용을 기술
• 컴포넌트의 구성 요소
• React 엘리먼트는 일반 객체

 

 

---

알아야 할 ES6 간단 정리

* Destructuring(구조 분해 할당)

* Arrow function(화살표 함수)

* For-of roof

* Template literals

let name = '유현';

console.log(`Hi my name is ${name}`) // Hi my name is 유현

* Default parameter(기본 매개변수)

function multiply(a, b = 1) { return a*b; }

multiply(5, 2); // 10

multiply(5); // 5

multiply(5, undefined); // 5

 * Rest 파라미터

const add = (a, b,... rest);  => { // 마지막 파라미터에... 을 붙여서 사용해야 한다

console.log(a) // 5

console.log(b) // 3

console.log(rest) // [ 9, 2, 1, 6 ] }

 

add(5, 3, 9, 2, 1, 6)

* Spread 연산자

const arr = ['a', 'b', 'c'];

console.log(arr) // ['a', 'b', 'c']

console.log(... arr) // a b c

 

const arr2 = [1, 2, 3]

console.log([... arr,... arr2]) // ['a', 'b', 'c', 1, 2, 3]

// 배열 합치기에 사용 가능

 

const copiedArr = [...arr]

console.log(copiedArr) // ['a', 'b', 'c']

// 배열 복사에 사용 가능

 

---

 

<간단 정리>

* 렌더링 :  HTML, CSS, JavaScript등 개발자가 작성한 문서를 브라우저에서 그래픽 형태로 출력하는 과정

 

 

 

 

 

 

출처 : React 공식문서