[React] 기초 공부

import React from 'react';
// 프로젝트를 만들 때 node_modules 디렉토리가 같이 생성됨 -> node_modules 디렉토리에 react 모듈이 설치됨
// react를 불러와서 사용할 수 있게 해줌

// 이런식으로 모듈을 불러와서 사용하는 것은 브라우저에서는 불가능함
// node.js에서 지원하는 기능임

// import 가 아닌 require 라는 구문으로 패키지를 불러올 수도 있다!
import logo from './logo.svg';
// svg 파일
import './App.css';
// css 파일

// babel-loader 는 자바스크립트 파일을 불러오면서 최신 자바스크립트 문법으로 작성된 코드를 바벨이라는 도구를 사용하여 es5 문법으로 변환해줌
// 코드 변환하는 이유
// - es5는 이전 버전의 자바스크립트, 최신 자바스크립트 문법을 es5 문법으로 변환하는 것은 구버전 웹 브라우저와 호환하기 위함(구버전 웹 브라우저에서는 실행되지 않기 때문)
// - 리액트 컴포넌트에서 사용하는 jsx 문법도 정식 자바스크립트 문법이 아니므로 es5형태의 코드로 변환해야 함
// - 그럼 babel-loader 설치는 어떻게 하냐 -> create-react-app 시 설치해주었기 때문에 따로 설정할 필요가 없음


// 컴포넌트(함수형 컴포넌트)
// 해당 코드는 jsx 
// - jsx 란 
//   자바스크립트의 확장 문법이며 xml과 매우 비슷하게 생김
//   이런 형식으로 작성한 코드는 브라우저에서 실행되기 전에 코드가 번들링되는 과정에서 바벨을 사용하여 일반 자바스크립트 형태의 코드로 변환됨
//   장점! - 가독성이 높고 작성하기 쉬움, html 과 비슷
function App() {
  return (
    // 컴포넌트에 여러 요소가 있다면 부모 요소로 하나로 감싸야 함!

    // 꼭 div 로 감싸지 않아도 됨
    // 리액트 v16이상 부터 도입된 Fragment 태그를 사용하면 됨
    // ex) import React, { Fragment } from 'react'; 로 추가해주고
    //     function App(){ return (<Fragment><div>내용</div></Fragment>); }
    // 이런식으로 Fragment로 감싸주면 됨

    // 다른 예시로는
    // ex) import React from 'react';
    //     function App(){ return ( <><div>내용</div></>)}
    // 이런식으로 <></>를 사용해줘도 됨
    <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;

 

 

if문 대신 조건부 연산자

import React from 'react';
import logo from './logo.svg';
import './App.css';
import react, { Fragment } from 'react';

function App() {
  const name = '리액트';
  const const_name = '상수';
  let let_name = '변수';
  // return 뒤에 여러줄일 경우 괄호로 감싸고 한줄일 경우 감싸지 않음 / jsx를 괄호로 감싸는 것은 필수사항이 아님
  return (
    <Fragment>
      <header className="App-header">
        {name === '리액트' ? (
          <h2>React</h2>
        ) : (
          <h2>not React</h2>
        )}
        
        /* 한줄로 */
        {name === 'react' ? (<h2>yes</h2>) : (<h2>no</h2>)}
        /* { 조건 '내용' ? (true) : (false)} */
        {name === 'react' ? (<h2>yes</h2>) : null }
        /* null을 랜더링 할 경우 아무것도 보여주지 않음 */
        <a
          className="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          Learn React
        </a>
      </header>
    </Fragment>
  );
}

export default App;

 

값이 undefinde ?

function App(){
  const name = undefinde;
  return name;
  /* 
  함수에서 undefined 만 반환하여 렌더링하면 안됨 / 오류발생
  
  --> return name || '값이 undefined';
  일 경우 페이지에 위 텍스트를 반환함 / undefinde일 때 원하는 텍스트를 입력해줌
  */
}

// jsx 내부에서 undefined를 렌더링 하는 것은 괜찮
function App(){
  const name = undefined;
  return <div>{name}</div>
  // 한줄일 경우 괄호를 없애도 됨!
}

function App(){
  const name = undefined;
  return <div>{name || 'dust'}</div>
  // 일경우 dust 반환
}

 

 

CSS

function App(){
  const name = 'dust';
  const style = {
    backgroundColor: 'yellow',
    color: 'black',
    fontSize: '16px',
    fontWeight: 'bold'
  };
  return <div style={style}>{name}</div>;
}

요런식으로 나옴!

// 인라인 스타일 사용
function App(){
  const name = '리액트';
  return (
    <div style={{
      backgroundColor: 'yellow',
      color: 'black',
      fontSize: '16px',
      fontWeight: 'bold',
      height: '300px'
    }}>
      {name}
    </div>
  );
}