[React] React 엘리먼트와 React DOM

React 엘리먼트 : React의 최소단위 일반 객체

React DOM은 React 엘리먼트와 브라우저의 DOM을 일치시킬 수 있도록 업데이트 한다.(핵심기능)

 

보통 React로 구현된 App은 하나의 Root DOM Node를 가진다.

(여러기능 통합한 경우 독립된 많은 수의 Root DOM Node를 가질 수도 있음)

<div id="root"></div>

Root DOM Node를 선언하고 내부 엘리먼트들은 직접작성이 아닌 React에의해 Control되게 설계해야한다.

 

const a = <h1>hi! React</h1>;
ReactDOM.render(a, document.getElementById('root'));

JS에서는 변수선언에 태그가 들어갈 수 없음. JSX문법.(일반객체에 엘리먼트를 담을 수 있다.)

 

ReactDOM.render()을 사용하면 React엘리먼트를 root DOM Node에 렌더링 한다.

 

---

 

컴포넌트를 활용하면 재사용 가능한 요소들을 여러조각으로 분리하여 효율적으로 사용한다.

모든 컴포넌트는 JSX를 렌더링하는 render메소드를 포함한다.

props라는 data를 받아 State에 맞는 React 엘리먼트를 반환하는 구조

class Hi extends React.Component {
  render() {
    return <h1>hi! {this.props.name}</h1>;
  }
}

클래스 컴포넌트. 

넘겨받은 props 데이타객체는 this를 통해 접근 가능.

function Hi(props){
 return <h1>hi! {props.name}</h1>;
}

함수형 컴포넌트: 매개변수로 props를 받아 활용.

---

컴포넌트 랜더링

 

const a = <h1>hi! react</h1>; // react 엘리먼트
const b = <Hi name="react" />; //react 엘리먼트로 사용자 정의 컴포넌트 사용

사용자 정의 컴포넌트 이름은 대문자로 시작하고 일반 엘리먼트는 소문자로 시작함.

React는 사용자 정의 컴포넌트를 발견하면 JSX 어트리뷰트(속성값)과 자식을 단일 객체(props)로 전달한다.

 

function Hi(props){
 return <h1>hi! {props.name}</h1>;
}
const element = <Hi name="react" />;
ReactDOM.render(
 element,
 document.getElementById('root')
);

이름이 Hi인 컴포넌트를 활용해 ReactDOM.render로 사용자 정의 컴포넌트가 선언된 곳에 렌더링 시킴.

name="react"가 props로 전달되어 hi react가 출력됨.

 

function Hi(props){
 return <h1>Hi! {props.name}</h1>;
}
function App(){
 return(
  <div>
   <Hi name="React" />
   <Hi name="Component" />
   <Hi name="Props" />
  </div>
 );
}
ReactDOM.render(
 <App />,
 document.getElementById('root')
);
//Hi! React
//Hi! Component
//Hi! Props

복수의 컴포넌트에 각각 다른 props를 주어 랜더링시켜 재사용시킬 수 있음(react의 장점)

 

여기서 중요한 것은 props인 name값은 컴포넌트 내부에서 절대 수정하면 안됨.(입력값을 함수 내에서 수정하면 안되고 반드시 입력에 대한 결과는 동일해야함) = 컴포넌트는 순수함수를 구현해야함