리액트 맛보기

React

: 앱 만들기에 유용

const h1 = <h1>Hello world</h1>;

• 이것만으로는 javascript파일과 html문서에서 모두 동작하지 않는다
  이것은 일단 javascript파일에 속한다
• <h1>Hello world</h1>은 JSX 라고 불린다
  JSX : javascript에 대한 "syntax extension(구문 확장)"
• .js파일이 JSX코드를 포함한다면 JSX 컴파일러가 JSX를 정규 Javascript로 컴파일해야 웹브라우저가 읽을 수 있음
• JSX element : ex) <h1>Hello world</h1>
  HTML처럼 보이는 이것은 .html파일 대신 .js파일에 있다는 차이가 있다
  javascript표현처럼 대우받음(변수 할당, 함수 통과, 객체와 배열에 저장)

	const navBar = <nav>I am a nav bar</nav>; 	// 변수 할당
    const myTeam = {							// 객체 할당
  		center: <li>Benzo Walli</li>,
  		powerForward: <li>Rasha Loa</li>,
  		smallForward: <li>Tayshaun Dasmoto</li>,
  		shootingGuard: <li>Colmar Cumberbatch</li>,
  		pointGuard: <li>Femi Billon</li>
};

• JSX attribute(속성): html같은 구문으로 씀, html처럼 속성 여러개 쓸 수 있음

	my-attribute-name="my-attribute-value";
    
    const panda = <img src='images/panda.jpg' 
    alt='panda' width='500px' height='500px' />;

Nested JSX

<h1>태그를 <a>태그로 둥지처럼 감쌀 수 있음

	<a href="https://www.example.com"><h1>Click me!</h1></a>

가독성 좋게 쓰면

<a href="https://www.example.com">
  <h1>
    Click me!
  </h1>
</a>

여러 줄로 감싸야 한다면 괄호를 쓸 수 있고

(
  <a href="https://www.example.com">
    <h1>
      Click me!
    </h1>
  </a>
)

변수처럼 저장해서 함수에 통과시킬수도 있음

const theExample = (
   <a href="https://www.example.com">
     <h1>
       Click me!
     </h1>
   </a>
 );

JSX Outer Elements

JSX expression must have exactly one outermost element.
여러 outer element들을 표현하고 싶을 때: <div></div>로 감싸기

• 되는 것:

const paragraphs = (
  <div id="i-am-the-outermost-element">
    <p>I am a paragraph.</p>
    <p>I, too, am a paragraph.</p>
  </div>
);

• 안 되는 것:

const paragraphs = (
  <p>I am a paragraph.</p> 
  <p>I, too, am a paragraph.</p>
);

Rendering JSX

ReactDOM : DOM을 처리하는 리액트 관련 메소드가 포함된 javascript라이브러리
ReactDOM.render() : JSX를 렌더링 하는 가장 일반적인 ReactDOM의 메소드. JSX표현식을 사용해 DOM 노드의 해당 트리를 만들고 추가하여 화면에 표시함.

• 메소드의 첫번째 argument: <h1>Hello world</h1>처럼 JSX 표현식이어야 함
• 메소드의 두번째 argument: 첫번째 argument의 컨테이너처럼 동작함. 이것이 선택한 요소에 첫번째 argument를 덧붙이는 형식임document.getElementById('app')은 id="app"인 태그에 덧붙여라~라는 의미
• index.html파일에 <main id="app"></main>이 있다면 1)은 2)의 결과와 같은

	// 1)
	ReactDOM.render(
		<h1>Hello world</h2>, 
		document.getElementById('app')
	);

	// 2)
	<main id="app">
  		<h1>Render me!</h1>
	</main>

• 첫번째 argument는 JSX표현식으로 평가되어야 할 뿐, 문자그대로 JSX표현식일 필요는 없음. JSX표현식이 할당된 변수가 와도 됨.
  

The Virtual DOM

ReactDOM.render()은 변경된 DOM 요소만 업데이트한다
똑같은 줄을 쓰면 2번째로 render는 동작하지 않음

const hello = <h1>Hello world</h1>;
 
// This will add "Hello world" to the screen:
 
ReactDOM.render(hello, document.getElementById('app'));
 
// This won't do anything at all:
 
ReactDOM.render(hello, document.getElementById('app'));

리액트 JSX 심화반(코드카데미) 링크

읽어보기 vritual DOM 링크
요약:

• javascript 프레임워크의 비효율적인 DOM 업데이트로 인한 속도 저하 문제 해결
• virtual DOM의 조작 시 실제 화면에 그려지지 않아 속도 빠름
• React에서 DOM을 업데이트하는 프로세스:
  1. JSX요소 렌더링 시, 전체 virtual DOM을 업데이트
  2. virtual DOM의 업데이트 전후 모습을 비교
  3. React가 변경된 객체를 파악(=diffing)
  4. 변경된 객체만 실제 DOM에서 업데이트
  5. 실제 DOM을 변경 시 화면 변경됨.

---

출처
👉 코드아카데미