JSX 문법

1. return시에 하나의 Dom만 리턴 가능.

 

사용 가능한 예시

 

function App() {

  return (

    <div>

      <div>

        <h1>이것이 리엑트인것인가 아주 빠르구만</h1>

      </div>

      <div>

        <h1>이것이 리엑트인것인가 아주 빠르구만</h1>

      </div>

    </div>

  );

}

 

사용 불가능 예시

 

function App() {

  return (

    <div>

        <h1>이것이 리엑트인것인가 아주 빠르구만</h1>

    </div>

    <div>

      <h1>이것이 리엑트인것인가 아주 빠르구만</h1>

    </div>

  );

}

---

2. 변수선언은 let이나 const 만 사용하는 것이 좋음. ( var의 규칙이 일반적이지 않기 때문 )

3. if 문이 사용이 불가능 하기 때문에 삼항연산자를 사용해야 함

4. 조건부 렌더링 ( 삼항연산자에 false 부분을 생략한 기능 )

 

let - 변수

const - 상수

사용 방법은 아래와 같이 {} 안에 변수명을 넣으면 됨

 

let a = 10; /* 변수 선언 */

const b = '아주좋아'; /* 상수 선언 */

function App() {

  return (

    <div>

      <div>

        <h1>{a === 10 ? '10입니다' : '10이 아닙니다'}</h1> {/* 삼항연산자 */}

      </div>

      <div>

        <h1>{b === '아주좋아' && '좋다고 합니다'}</h1> {/* 조건부 렌더링 */}

      </div>

    </div>

  );

}

---

5. css 디자인 ( 내부 / 외부 )

외부방식은 src/App.css에 기존 css 방식과 동일. ( 단 사용방법은 className 이다 )

 

import './App.css';

 

function App() {

  const mystyle = {

    color: 'red',

  };

  return (

    <div>

      <div style={mystyle}> {/* 내부 */}

        <h1>안녕</h1>

      </div>

      <div className="test"> {/* 외부 사용 추천 */}

        <h1>안녕</h1>

      </div>

    </div>

  );

}

---

6. css 디자인 ( 라이브러리 사용 )

 yarn과 styled components를 설치

 

npm install --global yarn

yarn add styled-components

 

 

import { styled } from 'styled-components';

const LoginBox = styled.div`

  padding: 30px 0 30px 0;

`;

const Login = () => {

  return (

    <LoginBox>

      <h1>로그인 페이지입니다.</h1>

    </LoginBox>

  );

};

---

- 출처 메타코딩 최주호