React JSX (javascript xml)

JSX = html + javascript

-react는 JSX를 활용해서 컴포넌트(화면)을 그린다.

React 라이브러리

- react : 리액트의 핵심 코드들이 담겨 있음.

- react-dom : 핵심 코드들로 구현한 화면을 dom에 연결시킬 때 사용

- react-scripts : 리액트로 구현한 코드를 실행하거나, 빌드할 때 사용하는 스크립트들을 모아둠.

JSX의 특징

import ReactDOM from 'react-dom';

let text = 'Hello, world!';
const num = 15;
const obj = { key: 0, a: 1, b: 2 };
const arr = ['a', 'b', 'c'];
const imageUrl =
  'https://dst6jalxvbuf5.cloudfront.net/static/img/logo/logo.svg';

const element = (
  <div>
    <h1>변수 넣기</h1>
    <ul>
      <li>{text}</li>
      <li>{text + 'test'}</li>
    </ul>
    <h1>숫자 및 계산식 넣기</h1>
    <ul>
      <li>{num}</li>
      <li>{num + 15}</li>
    </ul>
    <h1>Boolean, Nullish 값 넣기</h1>
    <ul> /* 아래 항목들은 아무것도 출력되지 않음 */
      <li>{true}</li>
      <li>{false}</li>
      <li>{undefined}</li>
      <li>{null}</li>
    </ul>
    <h1>Object, Array 넣기</h1>
    <ul>
      {/* <li>{obj}</li> obj는 이런 식으로 넣을 수 없음. */}
      <li>{arr}</li>
    </ul>
    <h1>주석 넣기</h1>
    <ul>
      <li>{/* 주석입니다. */}</li>
    </ul>
    <h1>태그 속성에 넣기</h1>
    <ul>
      <li>
        <img src={imageUrl} alt="logo" />
      </li>
    </ul>
  </div>
);

ReactDOM.render(
  element,
  document.getElementById('root')
);

- jsx에서 사용되는 태그의 속성 이름이 html과 다름.

- 태그를 명시적으로 닫아줘야 함.

- 하나의 태그로 감싸져있어야 함. (div)

- 중괄호로 태그 안에 넣어서 js 변수 사용할 수 있음.

 

 

import ReactDOM from 'react-dom';

const arr = [1, 2, 3];
const text = '';

const element = (
  <div>
    <h1>삼항연산자</h1>
    <ul>
      <li>
        {1 + 1 === 2
          ? '참입니다.'
          : '거짓입니다.'}
      </li>
    </ul>

    <h1>AND 연산자</h1>
    <ul>
      <li>{1 + 1 === 2 && 'AND 연산자1'}</li>
      <li>{arr.length && 'AND 연산자2'}</li>
    </ul>

    <h1>OR 연산자</h1>
    <ul>
      <li>{1 + 1 !== 2 || 'OR 연산자1'}</li>
      <li>{text || 'OR 연산자2'}</li>
    </ul>

    <h1>IF문 (즉시실행함수)</h1>
    <ul>
      <li>
        {(() => {
          if (1 + 1 === 2) return 'IF';
          else return 'ELSE';
        })()}
      </li>
      <li>
        {(() => {
          const data = '즉시실행함수';

          /* 어떤 연산이든 추가 가능 */
          /* 일반적으로는 이렇게 즉시실행함수가
         미리 위에서 가공하여 전달 */

          return data;
        })()}
      </li>
    </ul>
  </div>
);

ReactDOM.render(
  element,
  document.getElementById('root')
);

- jsx에서 중괄호로 javascript에서 쓰이는 값들 모두 넣을 수 있다 !

- 논리 연산자는 아래 같은 형태로 많이 쓰임 

   - {true/false && '문자열'} -> 앞이 true면 (뒤에 내용 봐야 하니까) 문자열 그대로 출력, false면 아무것도 출력하지 않음.

   - {true/false || '문자열'} -> 앞이 true면 아무것도 출력하지 않음, false면 (뒤에 내용 봐야 하니까) 문자열 그대로 출력.

- 즉시실행함수를 넣어서 쓸 수 있지만(if문은 이런식으로 밖에 쓸 수 없음), 이렇게 로직을 넣는것은 사실 별로 좋지 않음. 

 

 

반복문
- Warning: Each child in a list should have a unique "key" prop.

* jsx에서 반복문을 돌릴 때, key 속성을 필수로 넣어줘야 한다. (react 내부적으로 각각의 item을 구분하기 위해 사용하는 고유의 id) *

 

[Before : 요소에 키 속성이 없어서 오류 발생]

import ReactDOM from 'react-dom';

const arr = ['1번', '2번', '3번'];

const arr2 = [];
for (let i = 0; i < arr.length; i++) {
  arr2.push(<h4>{arr[i]}</h4>);
  // = [<h4>1번</h4>, <h4>2번</h4>, <h4>3번</h4>]
}

const element = (
  <div>
    <h1>배열로 넣기</h1>
    <ul>
      <li>{arr}</li>
      <li>{arr2}</li>
    </ul>

    <hr />

    <h1>Array.map</h1>
    <ul>
      <li>
        {arr.map((item) => {
          return <h4>{item}</h4>;
        })}
      </li>
    </ul>
  </div>
);

ReactDOM.render(
  element,
  document.getElementById('root')
);

 

[After : key 속성 추가]

import ReactDOM from "react-dom";

const arr = ["1번", "2번", "3번"];

const arr2 = [];
for (let i = 0; i < arr.length; i++) {
  arr2.push(<h4 key={i}>{arr[i]}</h4>);
  // = [<h4>1번</h4>, <h4>2번</h4>, <h4>3번</h4>]
}

const element = (
  <div>
    <h1>배열로 넣기</h1>
    <ul>
      <li>{arr}</li>
      <li>{arr2}</li>
    </ul>

    <hr />

    <h1>Array.map</h1>
    <ul>
      <li>
        {arr.map((item, index) => {
          return <h4 key={`${item}-${index}`}>{item}</h4>;
        })}
      </li>
    </ul>
  </div>
);

ReactDOM.render(element, document.getElementById("root"));

 

CSS 적용하여 스타일링하기
- CSS IN JS (나중에 라이브러리로 확인 가능) vs. CSS IN CSS (전통) 

* jsx에서는 style에 문자열이 아닌 오브젝트(key-value) 속성으로 넣어서 사용한다 *

import './index.css';

import ReactDOM from 'react-dom';

// 2. style 재활용
const roundBoxStyle = {
  position: 'absolute',
  top: 50,
  left: 50,
  width: '50%',
  height: '200px',
  padding: 20,
  background: 'rgba(162,216,235,0.6)',
  // 3. 속성은 camelCase
  borderRadius: 50
};

const element = (
  <div
    style={{
      // 1. Object로 css 작성
      position: 'relative',
      width: 400,
      height: 1000,
      background: '#f1f1f1'
    }}
  >
    <div style={roundBoxStyle}>Hello1</div>

    <div style={{ ...roundBoxStyle, top: 350 }}>
      {/* 4. className을 통한 스타일링 (CSS-in-JS) */}
      <div className={"highlight"}>Hello2</div>
    </div>

    <div style={{ ...roundBoxStyle, top: 650 }}>
      {/* 5. 조건적 스타일 */}
      <div
        className={
          1 + 1 === 2 ? 'highlight' : false
          //= 1+1 === 2 && 'highlight'
        }
      >
        Hello3
      </div>
    </div>
  </div>
);

ReactDOM.render(
  element,
  document.getElementById('root')
);



/*
css 파일 내용

.highlight {
  color: #fff;
  font-weight: bold;
  font-size: 36px;
}

*/

- jsx에서 오브젝트로 만들어진 속성은 Camel로 표기 (하이픈 말고)

- javascript 변수에 css 담아서  사용

- css 파일 import 꼭 해야 함

 

 

실무 중심! FE 입문자를 위한 React 강의 | 인프런 - 인프런