[React] 리액트 (React) 란?

1.React(리액트)란?

• 자바스크립트 라이브러리의 하나로서 사용자 인터페이스를 만들기 위해 사용합니다.
• 싱글 페이지 애플리케이션(SPA)이나 모바일 애플리케이션 개발에 사용할 수 있습니다.
• 대규모 또는 복잡한 리액트 애플리케이션 개발에는 보통 라우팅, API통신 등의 기능이 요구되는데 리액트에는 기본적으로 제공되지 않기 때문에 추가 라이브러리를 사용해야 합니다.

 

2.React 특징

1. 단방향 데이터 바인딩(One Wat Data flow)
   ▷리엑트는 단방향 바인딩을 사용하여 성능저하를 줄이고 더 확실하게 데이터를 추적 할수 있습니다.
   
   
2. 가상돔(Virtual Dom)
   ▷싱글 페이지 어플리케이션(SPA)에서는 리플로우/리페인트거 자주 발생 되는데 가상돔을 사용하여 최소화하여 성능을 최적화 시켰습니다.
   
   
3. 컴포넌트(Component) 기반
   ▷ 컴포넌트를 통해 UI를 재사용 가능한 개별적인 여러 조각으로 나누고, 각 조각을 개별적으로 살펴볼 수 있습니다.
   
   함수형 컴포넌트 : function 으로 정의하고 return 문에 JSX로 렌더링합니다.
   

   function Welcome(props){
     return <h1>hello, {props.name}</h1>;
   }

   
   클래스형 컴포넌트 : class로 정의하고 render() 함수에서 JSX를 반환합니다.
   

   class Welcome extends React.Component {
     render(){
       return <h1>Hello, {this.props.name}</h1>;
     }
   }​

4. 선언형 프로그래밍
   ▷명령형 프로그래밍(Imperative Programming)은 어떤 방법(How)으로 할 것인가?
   프로그램의 제어의 흐름과 같은 방법을 제시하고 계산(목적)을 명시하지 않는다.
   
   값을 2배로 만드는 방법(명령형)
   

   function double (arr) {
       let result = [];
       for (let i = 0; i < arr.length; i++) {
           result.push(arr[i] * 2)
       }
       return (result);
   }​

   
   ▷선언형 프로그래밍(Declarative Programming)은 무엇(What)을 할 것인가?
   제어의 흐름을 설명하지 않고 계산(목적)을 중요시 합니다.
   
   값을 2배로 만드는 방법(선언형)
   

   function double (arr) {
       return (arr.map(x => x * 2));
   }​

5. JSX문법
   ▷자바스크립트의 확장된 문법입니다.
   ▷번들링되는 과정에서 바벨(bacel)을 거쳐 자바스크립트 코드로 변환됩니다.
   ▷JSX는 자바스크립트의 공식문법이라고 할 수는 없습니다.
   
   문법규칙
   1. 컨포넌트에 여러 요소가 있다면 부모 요소 하나로 감싸야 합니다. 감싸지 않을 시 에러가 발생됩니다.
   
   

   function App(){
     return(
       <div>
         <h1>Hello</h1>
         <h1>Hello</h1>
       </div>
     )
   }​​

   
   이렇게 감싸는 이유는, Virtual DOM 방식에서는 컴포넌트 변화를 감지할 때 효율적으로 비교하도록 컴포넌트 내부는 하나의 DOM 트리 구조로 이루어져야 한다는 규칙 때문입니다.2.자바스크립트 표현 (자바스크립트 값을 JSX 내부에서 렌더링할 수 있습니다.)
   

   import React from 'react';
   
   //자바스크립트 표현
   function App(){
     const name = 'world';
     return(
     	<div>
         <h1>Hello!, {name}</h1>
       </div>
     )
   }
   
   export defalut App;​​​

   3.자바스크립트 표현식 내에서 if문 사용불가라 , JSX 밖에서 사전에 값을 설정하거나, {}안에 조건부 연산자(3항 연산)를 사용해야 합니다.
   

   import React from 'react';
   
   //자바스크립트 표현
   function App(){
     const name = 'world';
     return(
       <div>
         {name === 'world'(<h1>world 입니다.</h1>) : (<h1>world가 아닙니다.</h1>)}
         {name === world && <h1>world 입니다.</h1>}
         //and 연산자를 사용해도 똑같은 작업을 할수 있습니다.
       </div>
     )
   }
   
   export defalut App;​​​​

   
   4.undefined를 렌더링하지 않습니다.
   

   import React ftom 'react'; 
   //undefined를 렌더링 하지 않기!! 
   
   function App(){
     const name = 'undefined'; 
   
     return name; //error 발생 
     return name || '값이 undefined'; //or 연산자를 사용해 error 방지
     return <div>{name} </div> //JSX내부에서는 undefined 랜더링 가능.  
   } 
   
   export default App;​​

   
   5.HTML에서 스타일을 지정할때는 '-'을 사용하지 않고 카멜표기법을 사용합니다.
   

   function App() {
     const style = {
         //background-olor: 'white',
         backgroundColor: 'white',
     }
     return (
     	<div style={style}>world</div>
     )
   }​​​

   
   6. class속성을 설정 할때는 className이라고 표시 합니다.
   

   <div class="name"></div>
   <div className="name"></div>​​​

참고 사이트 : 자습서: React 시작하기

자습서: React 시작하기 – React

이 글이 도움이 되었다면 ♡(공감)를 눌러 주세요.