❓ React 에 대해서
-
사용자 인터페이스를 구축하기 위한 선언적이고 효율적이며 유연한 JS라이브러리 이다.
-
컴포넌트(Component)라고 불리는 작고 고립된 코드의 파편을 이용하여 복잡한 UI를 구성하도록 돕는다.
-
SPA를 전제로 하고 있고, 가상돔을 활용하여 업데이트해야하는 돔요소를 찾아서 해당부분만 업데이트를 한다.
-
그러므로 리렌더링이 잦은 동적인 모던 웹에서 빠른 퍼포먼스를 낼 수 있다.
💡 React의 주요 특징 5가지
- 컴포넌트 기반
- 선언형 뷰
- JSX
- Hooks
- State & Props
하나씩 살펴보자면,
🔥 컴포넌트 (Component)
-
개념적으로는 JS함수와 유사하다. props라고 하는 임의의 입력을 받은 후 화면에 어떻게 표시되는지를 기술하는 React 엘리먼트를 반환한다.
-
함수 컴포넌트
function Welcome(props) {
return <h1>Hello, {props.name}</h1>;
}데이터를 가진 하나의 props 객체인자를 받은 후 React엘리먼트를 반환하므로 유효한 React 컴포넌트이다.
이러한 컴포넌트는 JS함수이기 때문에 말그대로 함수 컴포넌트라고 호칭한다.
또한 ES6 class를 사용하여 컴포넌트를 정의할 수 있다.
- 클래스 컴포넌트
class Welcome extends React.Component {
render() {
return <h1>Hello, {this.props.name}</h1>;
}
}React의 관점에서 위 두가지 유형의 컴포넌트는 동일하다.
class는 몇가지 추가기능이 있다.(나중에)
🔥 컴포넌트의 이름은 항상 대문자로 시작
- React는 소문자로 시작하는 컴포넌트를 돔태그로 처리한다.
예를 들어<div />는 HTML div태그를 나타내지만<Welcome />은 컴포넌트를 나타내며 범위안에 Welcome이 있어야한다.
잘못된 예시 🔽
import React from 'react';
// 잘못된 사용법! 아래는 컴포넌트이므로 대문자화 해야 한다.
function hello(props) {
// 올바른 사용법! 아래의 <div> 사용법은 유효한 HTML 태그이기 때문에 유효하다.
return <div>Hello {props.toWhat}</div>;
}
function HelloWorld() {
// 잘못된 사용법! React는 <hello />가 대문자가 아니기 때문에 HTML 태그로 인식하게 된다다.
return <hello toWhat="World" />;
}올바른 예시 🔽
import React from 'react';
// 올바른 사용법! 아래는 컴포넌트이므로 대문자로 시작해야 한다.
function Hello(props) {
// 올바른 사용법! 아래의 <div> 사용법은 유효한 HTML 태그이기 때문에 유효하다.
return <div>Hello {props.toWhat}</div>;
}
function HelloWorld() {
// 올바른 사용법! React는 <Hello />가 대문자로 시작하기 때문에 컴포넌트로 인식한다.
return <Hello toWhat="World" />;
}🔥 컴포넌트 합성하기
- 컴포넌트는 자신의 출력에 다른 컴포넌트를 참조할 수 있다.
function Welcome(props) {
return <h1>Hello, {props.name}</h1>;
}
function App() {
return (
<div>
<Welcome name="Sara" />
<Welcome name="Cahal" />
<Welcome name="Edite" />
</div>
);
}🔥 선언형 뷰
위 블로그에서 너무 깔끔하게 정리를 잘해주셔서 보고 참고했다.
🔥 JSX
const element = <h1>Hello, world!</h1>;- 위의 문법은 JSX라고 불리는 JS를 확장한 문법이다.
- UI가 어떻게 생겨야하는지 설명하기 위해 React와 함께 사용되길 권장된다.
- JS의 모든기능이 포함되어 있다.
JSX 표현식에 포함하기
const name = 'chiyoung';
const element = <h1>Hello, {name}</h1>;JSX의 중괄호 안에는 유효한 모든 JS표현식을 넣을 수 있다.
예를들어
2+2, user.firstName, formatName(user) 등은 모두 유효하다.
컴파일이 끝나면 JSX 표현식이 정규 JS함수 호출이되고 JS객체로 인식이된다.
즉 JSX를 if/for문안에 사용하고 변수에할당하고, 인자로서 받아들이고, 함수로부터 반환까지 할 수 있다.
JSX는 HTML보다는 JS에 가깝기 때문에 React DOM은 HTML어트리뷰트 이름대신 camelCase프로퍼티 명명규칙을 사용한다.
예를들어 JSX에서 class는 className이되고 tabindex는 tabIndex가 된다. (카멜표기법)
JSX는 주입공격을 방지한다.
// JSX에 사용자입력을 삽입하는것은 안전하다.
const title = response.potentiallyMaliciousInput;
// 이것은 안전하다다.
const element = <h1>{title}</h1>;-
기본적으로 React DOM은 JSX에 삽입된 모든 값을 렌더링하기 전에 이스케이프하므로, 애플리케이션에서 명시적으로 작성되지 않은 내용은 주입되지 않는다.
-
모든 항목은 렌더링 되기 전 문자열로 변환된다.
-
위와 같은 특성때문에 XSS공격을 방지할 수 있다.
JSX는 객체도 표현한다
Babel은 JSX를 React.createElement() 호출로 컴파일한다.
다음 두 예시는 동일하다.
const element = (
<h1 className="greeting">
Hello, world!
</h1>
);
const element = React.createElement(
'h1',
{className: 'greeting'},
'Hello, world!'
);팁 : ES6및 JSX코드가 올바르게 표시되도록 편집기에 Babel언어설정 사용을 권장
🔥 hooks
- React hook은 클래스형식의 리액트컴포넌트에서만 할 수 있었던 state관리나 생명주기 등 함수형태 컴포넌트에서도 사용할 수 있게 만들어주는 기능.
hooks를 사용함에 있어 장점
- 코드가 간결해진다.
- 가독성이 우수해진다.
- 많은 라이브러리들이 훅으로 나오고있다.
- HOC 헬을 벗어날 수 있다.
- 불필요한것같은 코드들을 적을 필요가 없다.
🔥 states / props
states -> states상태검사
위 사이트에 정리가 잘 되어있어 참고했다.
props
- 속성을 나타내는 데이터
- 함수컴포넌트나 클래스컴포넌트 모두 컴포넌트 자체 props를 수정해선 안된다.
