React 1일

# React 설치

 

1) Visual Studio Code terminal에서 react 설치를 원하는 위치로 이동

    ex) C:\Users\user\Documents\frontendReview에서 내부에 있는 basic폴더로 이동을 원할 경우

          >> cd basic

        ++ 상위 폴더로 이동을 원할 경우

            >> cd ..

 

npm install -g create-react-app 먼저 입력

 

2) npx create-react-app react-basic 입력

    terminal 꺼내기 단축키: Ctrl + j

    

    npx: npm과 유사한 패키지 매니저

    create-react-app: 리액트 프로젝트를 만들 때 필요한 명령어

    react-basic: 생성할 프로젝트 폴더 이름

 

3) 생성한 폴더로 이동

    cd react-basic

 

4) 리액트 서버 실행

    npm start

 

5) src / App.js에서 작업

---

# 리액트란?

- UI(User Interface)를 개발하기 위해 사용되는 자바스크립트 라이브러리

  라이브러리: 자주 사용되는 코드의 묶음

- 페이스북이 개발

- 컴포넌트를 기반으로 한 선언적 문법

- 싱글페이지 구조

- virtual DOM을 HTML에 주입한다

 

# JSX

- JavaScript Extension

- 자바스크립트의 확장문법

- virtual DOM을 만들 때 사용된다

- 선언적인  문법으로 사용하기 편리하다

 

# JSX 문법

1) React Fragment

  - 하나의 element로 vertual DOM을 한 번 감싸주어야 한다.

  - <div>등 non-semantic element로 감싸주어도 되지만 의미없는 element의 추가를 줄이기 위해

    <Fragment></Fragment> 또는 <></>를 사용한다.

function App() {
  return (
  <>
    <h3>React Fragment</h3>
    <ul>
      <li>Foo</li>
      <li>Bar</li>
      <li>Baz</li>
    </ul>
  </>
  )
}

 

2) element attribute

  - element attribute는 html과 동일

function App() {
  return (
    <>
    <h3>JSX 엘리먼트 attribute</h3>
    <ul>
      <li>
        <a href="https: google.com" target="_blank">Foo</a>
      </li>
      <li>
        <img src="/" alt="Bar"/>
      </li>
      <li>
        <input type="text" placeholder="Baz" autoComplete="off"/>
      </li>
    </ul>
    </>
  )
}

 

3) inline style

  - html 태그에 직접 style 속성을 지정

  - 혹은 style 객체를 사용하여 속성을 지정할 수 있다.

// 스타일 직접 지정
function App() {
  return (
    <>
      <h3>JSX inline style</h3>
      <ul style={{border: "1px solid"}}>
        <li style={{textDecoration: "underline"}}>Foo</li>
        <li>Bar</li>
        <li>Baz</li>
      </ul>
    </>
  )
}

// 스타일 객체를 이용하여 지정
function App() {
  const st = {
    textDecoration: "line-through",
    color: "#f00"
  };

  return (
    <>
        <ul>
          <li style={st}>Guiness, Ireland</li>
          <li>Heineken, Netherlands</li>
          <li>Budwiser, USA</li>
        </ul>
    </>
  )
}

 

4) JSX에서 연산결과 출력하기

  - {중괄호} 사용

  - 객체 활용하여 리스트 작성

function App() {
  let cat = {
    name: 'kitty',
    age: 2,
    home: null,
    sound: function() {
      return 'meow';
    }
  }

  return (
    <>
      <h3>{cat.name}</h3>
      <ul>
        <li>이름: {cat.name}</li>
        <li>나이: {cat.age}</li>
        <li>집: {cat.home}</li>
        <li>울음: {cat.sound()}</li>
      </ul>
    </>
  )
}

 

5) JSX에서 조건문 사용

  - 논리연산자와 삼항연산자

// &&(그리고)
function App() {
  return (
    <>
      <h3>JSX 조건문</h3>
      <p>조건1 &amp;&amp;(그리고) 조건2</p>
      <ul>
        <li>{'lol' && 'Foo'}</li>	// 두 조건 모두 참이면 뒤 조건 수행 Foo
        <li>{false && 'Bar'}</li>	// 결과X
        <li>{'lol' && false}</li>	// 결과X
      </ul>
    </>
  )
}

// ||(또는)
function App() {
  return (
    <>
      <h3>JSX 조건문</h3>
      <p>조건1 ||(또는) 조건2</p>

      <ul>
        <li>{'lol' || 'Foo'}</li> // 둘 다 참일경우 앞조건이 수행 lol
        <li>{false || 'Bar'}</li>	// Bar
        <li>{'lol' || 'false'}</li>	// lol
      </ul>
    </>
  )
}

// !와 ?
function App() {
  return (
    <>
      <h3>JSX 조건문</h3>
      <p>!(부정), ?(삼항연산자)</p>

      <ul>
        <li>{!'Foo'}</li>	// 결과X
        <li>{true ? 'Bar' : ''}</li>	// Bar
        <li>{false ? '' : 'Baz'}</li>	// Baz
      </ul>
    </>
  )
}

 

6) JSX에서 array 출력

- 배열을 출력할 때 map()메서드 사용

// 배열 출력
function App() {
  const arr = ['foo', 'bar', 'baz'];
  return (
    <>
      <h1>JSX 반복문</h1>
      <ul>
        {arr.map((item, index) => (
          <li key={index}>{item}</li>
        ))}
      </ul>
    </>
  )
}

// 배열 내부 객체 출력
function App() {
  const beers = [
    {name: 'Heineken', origin: 'Netherlands'},
    {name: 'Guinness', origin: 'Ireland'},
    {name: 'Asahi', origin: 'Japan'}
  ]

  return (
    <>
      <h1>세계맥주</h1>
      <ul>
        {beers.map((beer,index) => (
          <li key={index}>{beer.name}, {beer.origin}</li>
        ))}
      </ul>
    </>
  )
}