패스트 캠퍼스 MGS 3기 - 5월 4일(React 특강)

JY·2022년 5월 4일
0

기본 구조 살펴보기


CRA: create-react-app. 리액트 개발 환경을 세팅해주는 라이브러리이다.

npx create-react-app my-app
npm run-script start

🤔 React 개발 시 편리한 확장 프로그램
확장 프로그램 > 'react' 검색 > 가장 상단 프로그램 설치

rfce: 다음과 같은 default 코드를 자동으로 생성해주는 모듈이다.

import React from 'react'
function App() {
  return (
    <div>App</div>
  )
}
export default App

src/App.js

App이라는 이름으로 App 함수를 내보내겠다.(export default)

export default App;

src/index.js

같은 경로의 App.js 파일을 가져와서 사용하겠다.

import App from './App';

다음 코드를 통해 public/index.html<div id="root"></div>를 찾는다.

src/const root = ReactDOM.createRoot(document.getElementById('root'));

  • App() 안에 자바스크립트와 관련된 내용
  • return 안에 HTML과 관련된 내용
    • 내용을 넣을 때는 camelCase 사용해야 한다.
    • 소괄호를 열어야 한다.
    • 태그를 하나만 리턴해야 한다. 따라서 태그를 여러 개 넣고 싶을 때는 최상위 태그(<>...</>)로 감싸주어야 한다.
import React from 'react'

function App() {
  return (
    <>
      <p className="jytrack">안녕하세요!</p>
      <p className="jytrack">안녕하세요!</p>
      <p className="jytrack">안녕하세요!</p>
    </>
  );
}

export default App;

🤔 컴포넌트?
컴포넌트란 개발자가 만든 태그를 의미한다고 볼 수 있다. 컴포넌트를 만들 때, 대문자로 만들어야 하는데 이는 HTML 태그와 충돌을 피하기 위함이다. (개발자 맞춤 태그다! 라고 알려주는 것.)
리액트에서는 자바스크립트 파일 하나하나를 컴포넌트라고 부른다.


JSX


  • jsx에서 css는style={{}}를 원칙으로 한다.
  • jsx 내부에서 js 값을 사용하려면 {}로 감싸주어야 한다.
import './App.css';
import React from 'react'

function App() {
  let 인삿말 = "안녕하세요!";

  return (
    <>
      <p style={{fontSize: "20px"}}>
        {인삿말}
      </p>
    </>
  );
}

export default App;


state


HTML, CSS, JS로 웹페이지를 만들면, 브라우저에서 이를 읽어서 보여준다.
반면, React 같은 경우에는 화면이 이동되거나 어떤 이벤트에 의해 컨텐츠가 바뀔 때 A페이지와 B페이지를 비교하고 바뀌는 부분만 렌더링하는 방식이다.

리액트에서는 state가 바뀔 때, 새로고침이 되지 않는다. 이는 새로고침 하지 않고 사용자에게 컨텐츠를 보여주고 싶을 때 state를 사용할 수 있다!
state는 문자, 숫자, 배열, 오브젝트, 기타 등등이 될 수 있다.

useStateSnippet

const [first, setfirst] = useState(second);

  • useState()arrow function으로 작성
  • this 사용 ❌
const [first, setfirst] = useState(second);

function useState() {
	...
    return [스테이트, 스테이트를 바꾸는 함수]
  }

예제 1

버튼을 클릭할 때마다 숫자가 1씩 증가하는 예제이다.

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

function App() {
  const [Target, setTarget] = useState(0);
  
  const 숫자늘리기 = () => {
    setTarget(Target+1);
  }

  return (
    <div style={{fontSize: "20px"}}>
      <button onClick={숫자늘리기}>클릭</button>
      <br/>
      {Target}
    </div>
  );
}

export default App;

👉 결과

예제 2

if-else 대신 삼항연산자를 사용해 버튼을 클릭할 때마다 Target의 상태를 true, false로 상태를 변경하는 예제이다.

조건 ? 조건이 참일 때 반환 : 조건이 거짓일 때 반환
import './App.css';
import React, {useState} from 'react'

function App() {

  const [Target, setTarget] = useState(false);

  const 바꾸기 = () => {
    setTarget(!Target);
  }

  return (
    <div style={{fontSize: "20px"}}>
      {
        Target ? 
          <p>Target이 true!</p> :
          <p>Target이 false!</p>
      }
      <button onClick={바꾸기}>바꾸기</button>
    </div>
  );
}

export default App;

👉 결과

예제 3

  • 버튼을 하나 만들고 버튼을 클릭하면, Target의 값을 List에 집어넣는다.
  • Target의 값을 1 증가한다.

List에 바로 push를 할 수 없으므로 temp라는 배열을 만들어서 진행했다.

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

function App() {
  const [List, setList] = useState([0]);
  const [Target, setTarget] = useState(1);

  const ListFunction = () => {
    let temp = [...List];
    temp.push(Target);
    setList([...temp]);

    setTarget(Target+1);
  }

  return (
    <div>
      <p>리스트: {List}</p>
      <p>타겟: {Target}</p>
      <button onClick={ListFunction}>타켓의 값이 List에 들어감</button>
    </div>
  );
}

export default App;

👉 결과

예제 3-1

예제 3의 코드를 반복문(map())을 이용해 출력할 수도 있다.

return (
    <div>
      <span>리스트: </span>
      {
        List.map((element, index) => {
          return(<p key={index}>{element}</p>);
        })
      }
      <p>타겟: {Target}</p>
      <button onClick={ListFunction}>타켓의 값이 List에 들어감</button>
    </div>
  );


🤔 참고

profile
🙋‍♀️

0개의 댓글