React

프론트앤드 개발을 위한 자바스크립트 오픈소스 라이브러리

3가지 특징

선언형

개발에서 선언형/명시적이란 뜻은 코드를 자세히 보지 않아도 코드의 의도를 분명히 알 수 있게 작성하는 형식
리액트는 jsx라는 파일을 활용한 프로그래밍 지향

컴포넌트 기반

리액트는 하나의 기능 구현을 위해 여러 종류의 코드를 묶어둔 컴포넌트를 기반으로 개발
컴포넌트로 분리하면 서로 독립적이고 재사용이 가능 기능 자체에 집중하여 개발가능 또한 유지보수, 유닛테스트에 용이
이전 작성된 기능을 이용할때 재사용이 가능

범용성

리액트는 자바스크립트 라이브러리라고 불림
프레임워크는 생태계에 종속(라이브러리는 종속되지 않아 다양하게 이용가능)
코드를 일부만 고칠 수 있기 때문에 다양한 곳에서 이용 가능
가장 널리 알려진 프론트앤드
리액트 네이티브를 이용해 모바일도 이용가능

JSX

javascript를 확장한 문법

• JSX는 JavaScript XML의 줄임말
  React에서 UI를 구성할 때 사용하는 문법으로 JavaScript를 확장한 문법
  이 문법을 이용해서 우리는 React 엘리먼트를 만들 수 있다

• jsx는 브라우저로 바로 실행 X
  브라우저가 이해할 수 있는 JavaScript코드로 변환해야함, 이럴 때 이용하는 것이 Babel
  Babel은 JSX를 브라우저가 이해할 수 있는 JavaScript로 컴파일
  컴파일 후, JavaScript를 브라우저가 읽고 화면에 렌더링

• React에서는 DOM과 다르게 CSS, JSX 문법만을 가지고 웹 애플리케이션을 개발
  JSX를 사용하면 JavaScript만으로 마크업(markup) 형태의 코드를 작성하여 DOM에 배치할 수 있게 되는 것(파일을 하나만 이용하기 때문에 명시적이다.)

규칙

• 하나의 엘리먼트 안에 모든 엘리먼트가 포함
  JSX에서 여러 엘리먼트를 작성할 때, opening tag와 closing tag로 감싸야함

• class 사용 시, className으로 표기
  만약 class로 작성하게 된다면 React에서는 이를 html 클래스 속성 대신 자바스크립트 클래스로 받아들이기 때문

• javascript 표현식 사용 시, 중괄호({}) 이용
  JSX에서 JavaScript를 쓰려면 중괄호를 이용 사용하지 않으면 일반텍스트로 인식

• 사용자 정의 컴포넌트는 대문자로 시작
  소문자 사용시 일반적인 HTML 엘리먼트로 인식

• 조건부 렌더링에는 삼항연산자 사용

<div>
{
    (5 * 5 === 25) ? (<p> true </p>) : (<p> false </p>)
}
</div>

조건이 있을 때 참인 경우 앞 거짓인 경우 뒤가 나오게 된다.

• 여러 개의 HTML 엘리먼트 표시할 때, map()함수 이용
  map 함수를 사용할 때는 반드시 "key" JSX 속성을 넣기
  "key" JSX 속성을 넣지 않으면 리스트의 각 항목에 key를 넣어야 한다는 경고가 표시

컴포넌트의 필요성

• 모든 리액트 애플리케이션은 최소 한 개의 컴포넌트를 가지고 있다.
  이 컴포넌트는 애플리케이션 내부적으로 근원(root)이 되는 역할
  이 최상위 컴포넌트는 근원의 역할을 하기 때문에 다른 자식 컴포넌트를 가질 수 있다. 이 계층적 구조(hierarchy)를 트리 구조로 형상화

• 기존 DOM을 이용한 구조의 변화가 필요할 때 HTML, CSS, JS를 모두 바꿔야만 변화가 되지만 react의 경우 구조의 변화에 맞춰 컴포넌트만 변경해주면 되기 때문에 더 효율적이다.

마지막으로...

오늘 배운것을 sprint로 공부를 했다. 어려운 점이 많았고 복습해야할 내용이 많다. 기본적으로 해야하는 것은 배웠지만 심화를 진행하니 못하는 부분이 훨씬 많았다. 복습을 잘하자.