React 기초

React

정의

• React는 UI 구축을 위한 JavaScript 기반 웹 개발용 라이브러리로, 컴포넌트를 조합하여 앱을 제작할 수 있도록 도와주는 툴

특징

1. 독립적 및 재사용 가능한 컴포넌트의 사용

• 독립적 및 재사용 가능한 컴포넌트를 이용하여 UI를 모듈화 함

2. 효율성 향상을 위한 VDOM 사용

• 효율성을 높이기 위해서 VDOM¹이라는 개념을 사용함

3. 컴포넌트가 다수의 요소 반환시 상위 요소의 사용

• 컴포넌트가 여러 요소를 반환할때는 상위 요소 내에 요소를 넣어야함
• 상위 요소로는 div등을 사용 가능함
• 예시 코드

function App(){
    return(
    <div>
    	<h1> Hello, World </h1>
        <p>First React-based Webpage</p>
    </div>
    );
}

더 간략화 된 버전

//프래그먼트 사용
function App{
    return(
        <React.Fragment>
            <h1> Hello, World </h1>
        	<p>First React-based Webpage</p>
        </React.Fragment>
    );
}


//더 간략화 된 프래그먼트 버전
function App{
    return(
        <>
            <h1> Hello, World </h1>
        	<p>First React-based Webpage</p>
        </>
    );
}

• 위의 코드는 리액트 16.2 버전부터 사용가능함

4. 컴포넌트의 구성 방식

• React에서 컴포넌트를 구성할때는 클래스와 함수를 이용한 2가지 방법이 있다

  1. 함수 방식

     • 함수로 구성시 return문은 필수로, 컴포넌트가 어떻게 표시되는지를 결정함

     • 예시 코드

  function App(){
  return <h1> Hello, World </h1>
  }
  

  1. 클래스 방식
     • 클래스로 구성시 render()메서드를 필요로 함
     • render() 메소드는 컴포넌트의 렌더링 결과를 표시 및 업데이트 해주는 역할을 함
     • 예시 코드

  class App extends React.Component{
  	render()
  }
  

참고한 책

실전! 스프링 부트와 리액트로 시작하는 모던 웹 애플리케이션 개발.

---

1. Visual Document Object Model(문서 객체 모델) ↩