[React] 기초

💡What is React??

- 프론트엔드 개발을 위한 JavaScript 오픈 소스 라이브러리

✅리액트의 3가지 특징

1. 리액트는 선언형이고
2. 컴포넌트 기반이며
3. 다양한 곳에서 활용할 수 있다는 특징을 가지고 있다.(범용성이 뛰어나다)

선언형(Declarative)

• 리액트는 한 페이지를 보여주기 위해 HTML / CSS / JS로 나눠서 적기보다
  하나의 파일에 명시적으로 작성할 수 있게 JSX를 활용한 선언형 프로그래밍을
  지향한다.

컴포넌트 기반(Component-Based)

• 리액트는 하나의 기능 구현을 위해 여러 종류의 코드를 묶어둔 컴포넌트를
  기반으로 개발한다.
• 컴포넌트로 분리하면 서로 독립적이고 재사용이 가능하기 때문에, 기능 자체에
  집중하여 개발 할 수 있다.

범용성(Learn Once, Write Anywhere)

• 리액트는 JavaScript 프로젝트 어디에든 유연하게 적용될 수 있다.
• Facebook에서 관리되어 안정적이고, 가장 유명하며, 리액트 네이티브로 모바일 개발도 가능하다.

💡JSX

- JavaScript를 확장한 문법이다.

JSX란?

• JavaScript XML의 줄임말로 문자열도 아니고 HTML도 아니다
• React에서 UI를 구성할 때 사용하는 문법으로 JavaScript를 확장한 문법이다.
• JSX는 JavaScript가 확장된 문법이지만, 브라우저가 바로 실행할 수 있는 JavaScript코드가 아니므로, 브라우저가 이해할 수 있는 JavaScript코드로 변환을 해주어야 하며, 이 때 이용하는 것이 "Babel"이다.

🔍 Babel이란?

• Babel은 JSX를 부라우저가 이해할 수 있는 JavaScript로 컴파일하며,
  컴파일 후, JavaScript를 브라우저가 읽고 화면에 렌더링할 수 있다.

DOM & React JSX

• Reactdptjsms DOM과 다르게 CSS, JSX 문법만을 가지고 웹 애플리케이션을 개발할 수 있다.
• 즉, 컴포넌트 하나를 구현하기 위해서 필요한 파일이 줄어들어, 한눈에 컴포넌트를 확인할 수 있다.
• JSX를 사용하면 JavaScript만으로 마크업(markup) 형태의 코드를 작성하여 DOM에 배치할 수 있다.

왜 JSX를 써야하는가?

• DOM에서 JavaScript와 함께 사용하기 위해서는 JavaScript와 HTML을 연결하기 위한 작업이 필요하다.
• React에서는 JSX를 이용해서 앞서 보았던 DOM코드보다 명시적으로 코드를 작성할 수 있으며, 기능과 구조를 한눈에 확인 할 수 있다.

❔JSX없이 React를 쓸 수 있을까??

• JSX없이도 React 요소를 만들 수 있다.
• 다만 코드가 복잡하고, 가독성이 떨어지는 단점이 있다.

💡JSX 활용

JSX 규칙

1. 하나의 엘리먼트 안에 모든 엘리먼트가 포함
: JSX에서 여러 엘리먼트를 작성하고자하는 경우, Opening tagdhk Closing tag로 감싸주어야 한다.

2. 엘리먼트 클래스 사용 시, className으로 표기
: React에서 CSS class속성을 지정하려면 "className"으로 표기해야한다.
: 만약 class로 작성하게 된다면 React에서는 이를 html 클래스 속성 대신 자바스크립트 클래스로 받아들이기 때문에 주의해야한다.

3. JavaScript 표현식 사용 시, 중괄호({}) 이용
: JSX에서 JavaScirpt를 쓰고자 한다면, 꼭 중괄호를 이용해야한다.
: 중괄호를 사용하지 않으면, 일반 텍스트로 인식한다.

4. 사용자 정의 컴포넌트는 대문자로 시작(PascalCase)
: React 엘리먼트가 JSX로 작성되면 "대문자"로 시작해야한다.
대문자로 작성된 JSX 컴포넌트를 따로 사용자 정의 컴포넌트라 부른다.
: 소문자로 시작하게 되면 일반적인 HTML 엘리먼트로 인식하게된다.

5. 조건부 렌더링에는 삼항연산자 사용
: 조건부 렌더링은 if문이 아닌 삼항연산자를 이용해야한다.

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

💡Component

🔍Component란?

• 하나의 기능 구현을 위한 여러 종류의 코드 묶음이다.
• UI를 구성하는 필수 요소이다.

Component로 생각하기

• React를 이요하면, 각자 독립적인 기능을 가지며, UI의 한 부분을 담당하기도 하는 이러한 컴포넌트를 여러 개 만들고 조합하여 애플리케이션을 만들 수 있다.
• 모든 리액트 애플리케이션은 최소 한 개의 컴포넌트를 가지고 있으며, 이 컴포넌트는 애플리케이션 내부적으로는 근원(root)이 되는 역할을 한다.
• 최상위 컴포넌트는 근원의 역할을 하므로 다른 자식 컴포넌트를 가질 수 있으며, 이 계층적 구조(hierarchy)를 트리 구조로 형상화할 수 있다.

Component Based 장점

• 기존에는 특정 위치의 수정을 위해서

  1. HTML로 구조를 수정한다.
  2. CSS를 수정한다.
  3. 변경된 구조와 디자인에 맞춰 DOM 조작 로직을 수정한다.

• React를 이용하여 컴포넌트 기반으로 만들었을 경우에 특정 위치의 수정을 위해서는

  1. 원하는 수정사항에 맞추어 기존 컴포넌트 위치만 수정해주면된다.