React

리액트(React)란?

리액트는 프론트앤드 개발을 위해 Facebook에서 만든 오픈소스 라이브러리

 

프론트앤드 개발은 웹 개발에서 유저에게 보이는 뷰에 대한 코드를 작성하고 개발하는 것

 

React를 배워야 하는 이유를 알 수 있는

리액트의 3가지 특징

리액트를 사용하면 프론트앤드 개발을 효율적이고 효과적으로 할 수 있다!!

 

1. 선언형(Declarative)

리액트는 하나의 파일에 명시적으로 작성할 수 있게 JSX를 활용한 선언형 프로그래밍 지향 

명시적 방식 === 코드를 자세히 분석하지 않고도 코드의 의도를 분명히 알 수 있게 작성하는 방식

 

2. 컴포넌트 기반(Component-Based)

리액트는 하나의 기능 구현을 위해 여러 종류의 코드를 묶어둔 컴포넌트를 기반함.

컴포넌트로 분리하면, 서로 독립적이고 재사용 가능하기 때문에, 기능 자체에 집중하여 개발할 수 있다.

컴포넌트의 장점 ? 독립적이기 때문에 유지 보수가 편하고 유닛 테스트를 하기에도 편함!

 

3. 범용성(Learn Once, Write Anywhere) = 다양한 곳에서 사용 할 수 있다

리액트는 JavaScript 프로젝트 어디에든 유연하게 적용될 수 있음.

앵귤러와 같은 프레임워크는 다른 프레임워크와 같이 사용할 수 없음.

안정적이고, 가장 유명하며, 리액트 네이티브(모바일 개발)로 모바일 개발도 가능함.

 

About JSX

JSX는 JavaScript XML의 줄임말로 문자열도 아니고, HTML도 아니다.

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

JSX는 JavaScript가 확장된 문법이지만, 브라우저가 바로 실행할 수 있지는 않다. 그래서 "Babel"을 이용하여 컴파일을 해야 JavaScript를 브라우저가 읽고 화면에 렌더링 할 수 있다.

React에서는 DOM과 다르게 CSS, JSX 문법만을 가지고 웹 애플리케이션을 개발할 수 있다.

물론, JSX가 없어도 React를 사용할 수 있지만, JSX를 사용함으로써 코드를 이해하기 쉬워지고 리액트의 특징이 더 잘 드러난다.

 

JSX 규칙

• 하나의 엘리먼트 안에 모든 엘리먼트가 포함
• 엘리먼트 클래스 사용 시, className 으로 표기
• JavaScript 표현식 사용 시, 중괄호({}) 이용
• 사용자 정의 컴포넌트는 대문자로 시작 (PascalCase) // ex: function Hello()
• 조건부 렌더링에는 if문이 아니라 삼항연산자 사용 // ex: (1+1 === 2) > (<p>정답</p>) : (<p>탈락</p>)
• 여러 개의 HTML 엘리먼트를 표시할 때, map() 함수를 이용

  • 

    출처 :  코드스테이츠

  • map 함수를 사용할 때에는 반드시 "key" JSX 속성을 넣어야 한다.