Study Web Development

4월 4일

이전으로

React

JSX

조건부 연산자

1. 새 리액트 앱 ch02-jsx 생성하고 구동

yarn create react-app ch02-jsx
cd ch02-jsx
yarn start

2. VSC에서 폴더 열기-ch02-jsx 선택하고 App.js를 다음처럼 수정

import React from 'react'; // 리액트 모듈로부터 리액트 객체 불러오기

function App() {
  const name = '리액트';
  const number = 0;
  const name2 = undefined;
  // JSX 내부에서는 if문 사용 불가; 조건부 연산자로 대체
  /*
  return (
    <div>
      {name === '리액트' ? <h1>리액트입니다</h1> : <h1>리액트가 아닙니다</h1>}
    </div>
  );
  */

  // AND 연산자(&&)를 사용한 조건부 렌더링
  // && 연산자로 조건부 렌더링을 사용하면 false일 때 아무것도 나타나지 않지만, 전건이 숫자 0이면 0은 보여짐
  // return number && <div>내용</div>;

  // undefined를 반환하면 오류가 발생하기 때문에 아래와 같이 오류 방지
  return <div>{name2 || '리액트'}</div>;
}

export default App;

스타일

1. 새 리액트 앱 ch03-style 생성하고 구동

yarn create react-app ch03-style
cd ch03-style
yarn start

2. VSC에서 폴더 열기-ch03-style 선택하고 App.js를 다음처럼 수정

import React from 'react';
import './App.css'; // 외부 CSS 파일 불러오기

function App() {
  const name = '리액트';

  // 인라인 스타일링
  const style = {
    // CSS 속성명을 카멜 표기법으로 변경
    backgroundColor:'black',
    color:'aqua',
    fontSize:'48px',
    fontWeight:'bold',
    padding:16, // 단위 생략시 px로 지정; 마지막에 , 있어도 무관
  };
  // return <div style={style}>{name}</div>;
  
  return ( // 태그에 스타일을 직접 명시할 때는 중괄호 2개 사용
    <div
      style=
    >
      {name}
    </div>
  );

  // 외부 CSS 파일에 정의한 스타일 적용
  /*
  return(
    <div>
      <div className='react'>{name}</div>
    </div>
  );
  */
}

export default App;

3. App.css를 다음처럼 수정

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

컴포넌트

• UI와 데이터를 모두 포함한 개념

1. 새 리액트 앱 ch04-component 생성하고 구동

yarn create react-app ch04-component
# npm init react-app ch04-component # npm으로 리액트 앱 생성하는 명령어
cd ch04-component
yarn start

2. VSC에서 폴더 열기-ch04-component 선택하고 App.js를 다음처럼 수정

import React, { Component } from 'react';
import './App.css';
import './MyComponent';
import MyComponent from './MyComponent';

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

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

// 익명 함수로 외부 파일 컴포넌트 불러오기
/*
const App = function() {
  return <MyComponent />;
};
*/

// 화살표 함수로 외부 파일 컴포넌트 불러오기
const App = () => {
  return <MyComponent />;
}

export default App;

3. App.css를 다음처럼 수정

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

4. src 폴더에 새 파일 MyComponent.js 생성

import React from 'react';

// 익명 함수
/*
const MyComponent = function() {
    return <div>내 컴포넌트</div>;
};
*/

// 화살표 함수
const MyComponent = () => {
    return <div>내 컴포넌트(화살표 함수)</div>;
}

// UI 전달
export default MyComponent;

다음으로