20230617 2장. JSX

1. 코드 이해하기

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();

여기 상단을 보게 되면 Import 구문이 사용 됐다. 이는 특정 파일을 불러오는 것을 의미한다. 리액트로 만든 프로젝트의 자바스크립트 파일에서 import를 사용하여 다른 파일들을 불러와 사용할 수 있다. 

import logo from './logo.svg';
import './App.css';

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>
          Edit <code>src/App.js</code> and save to reload.
        </p>
        <a
          className="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          Learn React
        </a>
      </header>
    </div>
  );
}

export default App;

 

이 코드는 App이라는 컴포넌트를 만들어 줍니다. function 키워트를 사용하여 컴포넌트를 만든다. 이러한 컴포넌트를 함수 컴포넌트라 부른다. 프로젝트에서 컴포넌트를 렌더링하면 함수에서 반환하고 있는 내용을 나타내어진다. 렌더링이란 '보여준다'라는 것을 의미한다.

이러한 코드를 JSX라고 불린다.

 

2. JSX의 장점

보기가 쉽고, 익숙하다. 그리고 좀 더 높은 활용도를 가지고 있다. 컴포넌트를 마치 HTML 태그 쓰듯이 작성이 가능하다.

 

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();

위 코드는 document.getElementById를 사용하여 id가 root인 HTML요소를 찾고(요소는 public/index.html에 있다), 리액트 컴포넌트를 보여줄 수 있는 루트 인스턴스를 createRoot 함수를 사용하여 생성한다. 그리고 root.render 함수에 JSX 코드를 인자에 넣어서 보여주고 싶은 컴포넌트를 화면에 보여준다.여기에 React.StrictMode라는 컴포넌트가 사용되었는데, 이는 리액트 프로젝트에서 앞으로 사라질 레거시 기능을 사용할 때 경고를 주고, 앞으로 미래의 리액트 버전에 도입될 기능들이 정상적으로 호환될 수 있도록 유도하는 개발환경에서만 활성화되는 디버깅용 컴포넌트이다.

 

3. JSX 문법

감싸인 요소

컴포넌트에 여러 요소가 있다면 반드시 부모 요소로 하나를 감싸야 한다.

function App() {
  return (
   <div>
    <h1>리액트다</h1>
    <h2>잘 작동함?</h2>
      
    </div>
  );
}

export default App;

위 코드와 같이 div로 컴포넌트 요소 여러개를 왜 하나의 요소로 묶어야 할까?

그것은 Virtual DOM에서 컴포넌트 변화를 감지해 낼 때 효율적으로 비교할 수 있어서 그렇다. 컴포넌트 내부는 하나의 DOM트리 구조로 이루어져야 한다는 규칙이 있다. div로 감싸는 방법 말고 Fragment라고 기능도 있다.

import { Fragment } from 'react';

function App() {
  return (
   <Fragment>
    <h1>리액트다</h1>
    <h2>잘 작동함?</h2>
      
    </Fragment>
  );
}

export default App;

import { Fragment } from 'react';

function App() {
  return (
   <>
    <h1>리액트다</h1>
    <h2>잘 작동함?</h2>
      
    </>
  );
}

export default App;

<></> 이렇게 사용도 가능

위 상단 코드에 import구문에 Fragment 모듈이 추가된다.

 

4. 자바스크립트의 표현

JSX안에서 자바스크립트 문법을 사용하고자 할 때는 JSX내부에서 코드를 { }로 감싸면 된다.

function App() {
  const name = '리액트'
  return (
   <>
    <h1>{name}리액트다</h1>
    <h2>잘 작동함?</h2>
      
    </>
  );
}

export default App;

5. const와 let의 차이점 / var

var

-> scope(해당 값을 사용할 수 있는 코드 영역)가 함수 단위이다.

function myFunction() {
  var a = 'hello';
  if(true) {
    var a = 'bye';
    console.log(a); // bye
  }
  console.log(a); // bye
}

myFuction
export default App;

위 코드와 같이 if문 바깥에서 var 값을 hello로 선언하고, if문 내부에서 bye로 설정한다. if 문 내부에서 새로 선언했을 때 if문 밖에서 a를 조회하면 변경된 값이 나타난다.

-> 이런 결점을 해결 해주는 것이 let 과 const이다.

 

const

-> 한번 지정되면 변경이 불가능한 상수를 선언할 때 사용하는 키워드이다.

let

-> 동적인 값을 담을 수 있는 변수를 선언할 때 사용하는 키워드이다.

 

function myFunction() {
  let a = 1;
  if(true) {
    let a = 2;
    console.log(a); // 2
  }
  console.log(a); // 1
}

export default myFunction;

 

let과 const는 scope가 함수 단위가 아닌 블록 단위이므로, if 문 내부에서 선언한 a값은 if문 밖의 a값을 변경하지 않는다.

let과 const를 사용할 때 같은 블록내부에서 중복 선언이 불가능하다는 점이다.

let a = 1;
let a = 2; // Uncaught SyntaxError: Identifier 'a'has already been declared

const의 경우는 한번 선언하면 재 설정할 수 없다.

const b = 1;
b = 2 // Uncaught TypeError: Assignment to constant variable

6. if 문 대신 조건부 연산자

-> 삼항 연산자

JSX 내부에서는 자바스크립트 표현식에서 if문을 사용할 수 없다. 하지만 조건에 따라 다른 내용을 렌더링해야 할 때는 JSX 밖에서 if 문을 사용하여 사전에 값을 설정하거나, {  } 안에 조건부 연산자를 사용하면 된다. 조건부 연산자는 삼항 연산자이다.

function App() {
  const name = '리액트';
  return (
    <div>
      { name === '리액트' ? (<h1>리액트입니다만</h1>) : (<h2>리액트가 아닙니다만</h2>)}
    </div>
  )
}
export default App;

 

7. AND 연산자(&&)를 사용한 조건부 렌더링

개발하다 보면 특정 조건을 만족할 때 내용을 보여주고, 만족하지 않을 때 아에 아무것도도 렌더링을 하지 않아야 하는 상황이 올 수 있다. 이럴 때 조건부 연산자를 통해 구현할 수 있다.

function App() {
  const name = '리액트';
  return (
    <div>
      { name === '리액트' && <h1>리액트입니다만</h1>}
    </div>
  )
}
export default App;

8.undefined를 렌더링하지 않기

어떤 값이 undefined일 수도 있다면, OR(||) 연산자를 사용하면 해당 값이 undefined일 때 사용할 값을 지정할 수 있다.

name의 값이 undefined일 때 보여 주고 싶은 문구가 있다면 다음과 코드를 작성하자.

function App() {
  const name = 'undefined';
  return <div> { name || '리액트'} </div>;

}
export default App;

 

9 .인라인 스타일링

리액트에서는 DOM 요소에 스타일을 적용할  때는 문자열 형태로 넣는 것이 아니라 객체 형태로 넣어 주어야 한다. 스타일 이름 중에서 background-color처럼 - 문자가 포함되는 이름이 있다. 이러한 이름은 - 문자를 없애고 카멜 표기법(camelCase)로 작성해야 한다.

따라서 background-color 는 backgroundColor로 작성한다.

 1.

function App() {
  const name = '리액트';
  const style = {
    backgroundColor: 'black',
    color: 'aqua',
    fontSize: '48px',
    fontWeight: 'bold',
    padding: 16
  };
  return <div style={style}>{name}</div>
}
export default App;

2.

function App() {
  const name = '리액트';
  return (
  <div style = {{
    backgroundColor: 'black',
    color: 'aqua',
    fontSize: '48px',
    fontWeight: 'bold',
    padding: 16
  }}
  >
    {name}
  </div>
  )
}
export default App;

10. className

class가 아닌 className으로 값을 지정해줘야 한다. 이 className을 불러올 때 App.js 파일을 불러와야 한다.

import './App.css';
function App() {
  const name = '리액트';
  return <div className='react'>{name}</div>
}
export default App;

11. 꼭 닫아야하는 태그

오류 코드

function App() {
  const name = '리액트';
  return (
  <>
  <div className='react'>{name}</div>
    <input>
    </>
  );
}

export default App;

위와 같은 코드를 작성하게 되면 오류가 나온다. 이를 고치기 위해서는 아래와 같이 작성해보자

 

고친 코드

아래와 같이 input 태그를 닫아줘야 한다.

function App() {
  const name = '리액트';
  return (
  <>
  <div className='react'>{name}</div>
    <input></input>
    </>
  );
}

export default App;

12. 주석

주석 처리를 할 때 {/* ------- */} 와 같은 형식으로 작성해야 한다.

function App() {
  const name = '리액트';
  return (
  <> 
  {/* 주석은 이렇게 작성해야 한다.*/}
  <div className='react'>
    {name}
    </div>
    // 하지만 이런 주석이나 
    /* 이런 주석은 페이지에 그대로 나타나게 된다 */
    <input/>
    </>
  );
}

export default App;

13. 좋은 Extenstions

ESLint : 문법 검사 도구

Prettier : 코드 스타일 자동 정리 도구 / 코드 가독성을 위해 들여쓰기 해줌

 

--------------------------------------------------------------------------------------------------------------------

 

이번 2장과 전에 적었던 1장의 경우는 리액트의 개념 및 기본적인문법 들을 설명해주었다. 이러한 기초를 바탕으로 열심히 달려봐야겠다!