Dust

페이지 이동

import meno from './memo';
// 이동할 페이지를 import 해줌

const Home = () => {
  return(
      <div>
      	<!-- a 태그도 Link 태그로 변경해야함 / 변경전 -->
        <a href="/memo" title="메모장">
          메모장
        </a>
        <!-- 변경후 -->
        <Link href="/memo">
          메모장
        </Link>
      </div>
  )
};

export default Home;

페이지 불러오기

import React from 'react';
import SubMain from './sub_main';

const Main = () => {
  return (
    <>
      <div>메인화면</div>
      <div>메모장만들기</div>
      <!-- sub_main 페이지를 불러옴 -->
      <SubMain />;
    </>
  )
};

export default Main;


<!-- sub_main.tsx -->
<!-- 해당 페이지를 위에서 불러옴 -->
function subMain() {
  return <div>서브메인</div>;
}

예시 화면 

컴포넌트 속성

import React from "react";
import SubMain from "./sub_main";

const Main = () => {
  return (
    <div>
      <div>메인화면</div>
      <div>메모장만들기</div>
      <!-- name -->
      <SubMain name="react" />
    </div>
  );
};

export default Main;

// sub_main.tsx
import React from "react";

const subMain = (props) => {
  return <div>서브메인, {props.name}</div>;
  <!-- 서브메인, react -->
};

props.children

const Main = () => {
  return (
    <div>
      <div>메인화면</div>
      <div>메모장만들기</div>
      <SubMain name="react">리액트</SubMain>
    </div>
  );
};

const subMain = (props) => {
  return (
    <div>
      <div>서브메인, {props.name}</div>
      <div>props children의 값은 {props.children}</div>
      <!-- props children의 값은 리액트 -->
    </div>
  );
};

내부 값을 바로 추출하기

const Main = () => {
  return (
    <div>
      <div>메인화면</div>
      <div>메모장만들기</div>
      <SubMain name="react">리액트</SubMain>
    </div>
  );
};

const subMain = (props) => {
  const { name, children } = props;
  return (
    <div>
      <div>react, {name}</div>
      <!-- react, react -->
      <div>props children의 값은 {children}</div>
      <!-- props children의 값은 리액트 -->
    </div>
  );
};

subMain.defaultProps = {
  name: "dust",
  // Main 인라인에 name이 없으면 dust가 출력됨
};

더 간편하게

const subMain = ({ name, children }) => {
  return (
    <div>
      <div>react, {name}</div>
      <!-- Main에 인라인이 없을경우 dust, 있을경우 react -->
      <div>props children의 값은 {children}</div>
      <!-- props children의 값은 리액트 -->
    </div>
  );
};

함수형 컴포넌트

// 함수형 컴포넌트
function App(){
  const name = '리액트';
  return <div className="react">{name}</div>;
}

장점

클래스형 컴포넌트보다 선언하기 훨씬 쉬움

클래스형 컴포넌트보다 메모리 자원 사용이 적음

프로젝트를 배포할 때 파일 크기가 더 작음

단점

state와 라이프사이클 api 사용이 불가능함 --> 리액트 v16.8업데이트(Hooks기능 도입) 이후 해결됨, 

(공식으로 함수형 컴포넌트와 Hooks를 사용하도록 권장)

클래스형 컴포넌트

 // 클래스형 컴포넌트
 import React, { Component } from 'react';
 
 class App extends Component {
   render(){
     const name = 'react';
     return <div className="react">{name}</div>;
   }
 }

장점

state 기능 및 라이프사이클 기능 사용 가능 / 임의 메서드 정의가능

render 함수가 꼭 있어야 하고 보여주어야 할 jsx를 반환함

화살표 함수

function() 을 사용했을 때 this 는 종속된 객체

화살표 함수의 this 는 자신이 종속된 인스턴스 (값을 연산하여 바로 반환해야 할 때 가독성을 높일 수 있음)

Javascript XML의 약자 JSX

리액트로 개발할 때 사용되며 공식적인 js 문법은 아님

브라우저에서 실행하기 전 babel을 사용하여 js 형태의 코드로 변환된다

부모 요소로 감싸는 형태여야 함

const Test = () => {
  return (
    // 부모 div
    <div>
      <p>내용</p>
    </div>
  )
}

const Test = () => {
  return (
    // 이런식으로도 가능하다(Fragment 태그)
    <>
      <p>내용</p>
    </>
  )
}

오류 예시

const Test = () => {
  return(
  // 부모 요소가 없음
    <div>내용</div>
    <div>내용</div>
  );
}

JSX 내에서 자바스크립트 표현식 작성시 {중괄호} 로 감싸주기

import React from 'react';

const Test = () => {
  const name = 'dust';
  return (
    <div>{name}</div>
    // 중괄호로 감싸주기
    // dust
  );
}

export default Test;

class --> className

import React from 'react';

const Test = () => {
  const name = 'dust';
  return (
    <div className="title">{name}</div>
    // class는 className으로 변경
  );
}

export default Test;

삼항연산자

import React from 'react';

const Test = () => {
  const name = 'dust';
  return (
    <div>
      {name === 'dust' ? (<h1>먼지</h1>) : (<h1>not 먼지</h1>)}
      <!-- { 조건 '내용' ? (true) : (false) } --> 
      <!-- { 조건 '내용' ? (true) : null }  -- null일경우 값을 null로 설정 -->
      <!-- <h1>먼지</h1> -->
      <div className="title">{name}</div>
    </div>
  );
}

export default Test;

+ &&({ 조건 '내용' ? (true) : null } 일 경우 사용)

import React from 'react';
import Popup from './Popup';
// Popup 렌더링, Popup 파일내용은 일단 제외

const Test = () => {
  // Popup
  const [popup, handlePopup] = useState(true);
  // useState(false); 일 경우 비활성화

  const name = 'dust';
  return (
    <div>
      {name === 'dust' ? (<h1>먼지</h1>) : (<h1>not 먼지</h1>)}
      <div className="title">{name}</div>
      {popup && <Popup />}
      <!-- popup 출력시 Popup 렌더링 -->
    </div>
  );
}

export default Test;

import React from 'react';
import Popup from './Popup';

const Test = () => {
  const [popup, handlePopup] = useState(false);
  
  var status = 'info';
  // 상태값

  const name = 'dust';
  return (
    <div>
      {name === 'dust' ? (<h1>먼지</h1>) : (<h1>not 먼지</h1>)}
      <div className="title">{name}</div>
      {popup && <Popup />}
      <!-- 상태값 변경에 따른 결과 출력 -->
      {
        { 
          info : <div>info</div>,
          menu : <div>menu</div>,
          shop : <div>shop</div>
        }[status]
      }
    </div>
  );
}

export default Test;

참고

https://codingapple.com/unit/react-if-else-patterns-enum-switch-case/

태그는 꼭 닫기

import React from 'react';
import Popup from './Popup';
import Sub from './sub';

const Test = () => {
  const [popup, handlePopup] = useState(false);
  // 팝업 비활성화

  const name = 'dust';
  return (
    <div>
      {name === 'dust' ? (<h1>먼지</h1>) : (<h1>not 먼지</h1>)}
      <div className="title">{name}</div>
      {popup && <Popup />}
      <!-- Popup파일 / 닫기 -->
      <div>
        <input />
        <Sub />
        <!-- 태그 닫기 -->
      </div>
    </div>
  );
}

export default Test;

화살표 함수는 뭘까,,

import React from 'react';

const Test = () => {
// function Test(){} --> const Test = () => {}

  const [number, setNumber] = useState({ number: 0, fixedNumber: 0 });
  
  return (
    <div className="btn-set">
        <button
          type="button"
          onClick={() => {
            setNumber({
              number: number.number + 1,
              fixedNumber: 0,
            });
          }}>
          <!-- 함수 선언이랑 비슷한 느낌 -->
          <!-- onClick function(){} -> onClick{() => {}} -->
          <!-- 객체인경우 괄호로 감싸서 표현 -->
          플러스
        </button>
        <button
          type="button"
          onClick={() => {
            setNumber({
              number: number.number - 1,
              fixedNumber: 0,
            });
          }}>
          마이너스
        </button>
      </div>
  );
}

export default Test;

참고

https://min-ji07.tistory.com/entry/React-%EA%B8%B0%EC%B4%88-1?category=926976 

! JSX, useState, useCallback, useEffect !

입력 후 하단 버튼 눌러주면 됨

비밀번호 입력할 때 토큰 복사해서 입력해주면 된다

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>
  );
}