[React] 시작 전 준비 2단계( 리액트 코드 index.js)

안녕하세요 언제까지 리액트 시작전인지 모르겠지만...

매번 느끼는 건데 기본기가 탄탄하지않으면 어느 순간 막히는 구간이 다시 오더라구요

하나하나 따져보면서 시작을 하려고해요

저번엔 class App extends Component 였었죠 기본앱을 만들수 있는 

Component 를 상속받기 위해서 import {Component} from 'react' 도 배웠고 이제 index.js 에서 

만들어진 App 을 어떻게 렌더링을 시키는지 확인하고자 index.js 을 보았습니다.

필요없는것들을 지우고 렌더링 에 초점을 맞추기 위해서 

코드를 수정하고 리액트 컴포넌트 쪼개기는 아직 부족한 상태라  기존의 샘플로 작성중인 코드들 을 옮기기 위해 여러 줄 태그를 써보았습니다만

render() { return 에서 사용되는 jsx 문법에는 덮는 부모가 꼭 있어야 한다고 에러가 납니다.

해당 이유는 virtual DOM 에서 컴포넌트 변화를 감지 하기 위해 컴포넌트 내부는 DOM 트리구조 하나로 되어야 한다는 규칙이기 때문이라고 하네요 

그래서 예전에는 해당 을 고치기 위해서

<div >

<tag>

<taG>

</div>

로 썻다고 하는데 

요즘{ React v16버전이후 부터는) Fragment 컴포넌트가 도입되어서 div로 감싸지 않고 Fragment를 사용한다고 합니다.

무슨 차이인지 궁금해서 한번 테스트 해보았습니다.

div로 감쌋을때

return (

<div className="onlyDiv">

<h1>리액트 한줄</h1>

<h2>리액트 두줄</h2>

</div>

);

렌더링 결과는

이와 같이 렌더링되네요  (create-react-app) 에서 App.js만 수정한거기 때문에 다른 변화들은 잘 모르지만 그 기준으로 봐주시길 바랍니다.

div가 아닌 Fragment 로 감쌌을 때

import React, { Component } from 'react';

class App extends Component {

render() {

return (

<Fragment>

<h1>리액트 한줄</h1>

<h2>리액트 두줄</h2>

</Fragment>

);

}

}

export default App;

앗.. 그냥 그대로 수정했더니 모른다고 에러가 나오네요 ;; ㅜ 

'Fragment' is not defined react/jsx-no-undef

import 에 비구조화 할당으로 Component가 아닌 Fragment도 가져와야 되는 걸 몰랐네요

import React, { Component ,Fragment } from 'react';

실행 결과 -

Fragment 로 감싸는 경우는 뭔가 렌더링 후에는 없던것 처럼 나오네요

위에 있던 불필요한 div의 렌더링을 없앨수 있어서 확실히 좋은것 같습니다.

Fragment를 생활화!!

그리고 JSX에서는

기존에 있던 JSP 템플릿 <%  여기에 자바 코드를 넣었었죠 

과같이 자바스크립트 코드를 넣을수도 있다고 하네요

render() {

const AppTitle = "앱 타이틀입니다";

return (

<Fragment>

<h1>리액트 한줄</h1>

<h2>리액트 두줄 {AppTitle}</h2>

</Fragment>

);

}

렌더를 이와같이 수정시에는 

{AppTitle} 부분이 동적으로 들어갈수 있네요 ㅜㅜ 이런거 너무좋아합니다.

여기 까지 해보니 JSX 렌더링에 대해서 한번 더 작성해야 할것 같아서  다시 한번 작성 하겠습니다.

JSX좋은것 같습니다.