[REACT] REACT 문법 정리하기 (리액트를 다루는 기술)

1. App.js 파일

import './App.css';

function App() {
  const name = '리액트!';
  const number = 0;
  const un = undefined;
  const style = {
    // 카멜 표기법으로 작성
    backgroundColor: 'black',
    color: 'aqua',
    fontSize: '48px',
    fontWeight: 'bold',
    padding: 16,
  };

  return (
    <div>
      1. 변수 및 3항 연산자 사용
      {/* 3항 연산자 */}
      {name === '리액트' ? 
        (
          <h1>{name} 입니다.</h1>
        ) : (
          <h1>{name}가 아닙니다.</h1>
        )
      }

      <h2>잘 작동하니?</h2>

      2. 중괄호를 통해 조건식 사용하기 
      {/* 
        틀리면 null임 / null 일 때 && 사용
        다르면 아무것도 안 나타남. 조건을 만족해야 && 뒤 문법 실행 됨.
      */}
      {name === '리액트!' && <h1>{name} 입니다.</h1>}

      3. 0의 활용법 : 
      {/* 
        값이 0이면 0 출력,
        이외의 값이면  && 뒤 문법 실행 됨. 
      */}
      {number && <div>내용</div>}

      <br></br>

      4. 값이 undefined : 
      {/* 
        1. undifined로 return하면 에러
        2. return 내부에 부모가 여러개 있으면 에러남 <></> : fragment로 감싸야함
       */}

      {/* undifined일때 || 조건 사용 */}
      {un || '값이 undifined입니다.'}

      <div>{un}</div>
      {/* {un} : 에러발생 */}

      5. 스타일 변수로 사용해서 적용하기
      <div style={style}>{name}</div>

      6. 인라인 스타일 적용하기
      <div
        style={{
          backgroundColor: 'black',
          color: 'aqua',
          fontSize: '48px',
          fontWeight: 'bold',
          padding: 16,
        }}
      >
        {name}
      </div>

      7. App.css 파일 사용
      <div className="react">{name}</div>

      8. input 사용 방법
      {/* input만 적으면 에러남, br도 마찬가지 */}
      <input></input>
      <br></br>
      <input />

      9. 주석 사용하는 방법
      {/* 주석 작성 방법 */}
      <div // 태그 내부에서 사용하는 주석(//)
        className="react"
      >
        {name}
      </div>

      {/* //, /*를 {} 없이 사용하면 페이지에 그대로 나타남 */}

      10. html 태그와 동일하게 사용하기
      <h1>들여쓰기 이상</h1>
      <h2>코드</h2>
      <p>입니다.</p>
    </div>
  );
}

export default App;

 

 

2. App.css 파일

.react{
  background-color: aqua;
  color: black;
  font-size: 48px;
  font-weight: bold;
  padding: 16px;
}

 

3. 출력 화면

 

 

위와 같이 나오는 것을 확인할 수 있습니다~