React 기초 다지기

SERI·2022년 5월 25일
0

📜 기본 지식

  • JSX

    • 자바스크립트의 HTML 코드
  • CLASS

    • 명칭
      • 바닐라 자바스크립트 : class
      • JSX : className
  • 사용자 정의 컴포넌트의 이름의 첫 글자는 대문자

  • HTML 태그 사이에 적을 내용이 없으면 <Hi />로 적음

  • import할 때 js파일은 확장자를 적어주지 않아도 됨

  • 컴포넌트 함수는 언제나 true

  • ModalIsopen ? <modal /> : null

    • 다른 표현
      • ModalIsOpen && <Modal />
        • 둘 다 true라면 두 번째 값( <Modal /> ) 반환
  • 리액트의 컴포넌트 함수는 반드시 동기적. JSX 반환.

  • ... : 값만 가져오기 (JS 연산자)

  • 객체를 JSX element로 변환하면 출력 가능 (map 함수 이용)

  • Hello 컴포넌트 작성법

1)

const Hello = function () {
return <p>Hello</p>;
};

export default Hello;

2) arrow

3)

export default const Hello = function () {
return <p>Hello</p>;
}
  • 사용법

    • 사용할 파일의 상단에 적음
      import Hello from './component/Hello';

  • react-router-dom v6

    • Switch -> routes
    • exact (X) -> URL에 * 붙임
    • useHistory -> useNavigate
      • replace(true)
        • 뒤로 가기 불가능
      • replace(false)
        • 뒤로 가기 가능
  • .module.css
    스타일을 특정 컴포넌트에 한정

import classes from './MainNavigation.module.css';

<JSX>
<header className={classes.header}>

<CSS>
.header {}

  • REST API : URL 주소와 메소드로 CRUD 요청

    • Create : POST
    • Read : GET
    • Update : PUT
    • Delete : DELETE


📦 PROPS

  • 매개변수

  • 객체

    • <Todo text = 'Learn React' />
      여기서 text는 key, learn react는 value
  • {} : 자바스크립트로 취급하라고 알려주는 것 (동적 표현식)

    • 연산 가능

    • 단 block문 작성 불가능 (if)

    • 이벤트는 태그 안에 적어줌

      <button className='btn' onClick>

      • 이벤트 속성의 값은 함수를 적어줌

      • 함수 뒤에 ()를 붙이면 X. 적게 되면 검증을 하는 도중에 바로 실행해버림.

      • 컴포넌트는 모두 자바스크립트 부분이나, HTML 부분은 겉으로 그렇게 보이지 않는 것. return() 위의 부분은 표준 자바스크립트로 작성한다. function을 정의하는 부분.
        return ()안에서는 {props.text}로 적으나 함수 정의 부분에서는 단지 props.text로만 적어도 됨.


  • 작성 방법 두 가지
function Hello(props) {
  return <div style={{ color: props.color }}>안녕하세요 {props.name}</div>
}
function Hello({ color, name }) {
  return <div style={{ color }}>안녕하세요 {name}</div>
}

🪄 event props

내장된 컴포넌트 <button> 같은 것들은 이벤트 onclick에 사용자 정의함수를 지정할 수 있으나, 사용자가 직접 만든 컴포넌트 <Modal />,<Backdrops />는 onclick에 사용자 정의 함수를 주면, 주어진 props( {closeModalHandler} )가 뭔지 모름. 그래서 컴포넌트 함수인 <modal />로 가서 함수를 적어줘야 한다. 사용자가 직접 만든 컴포넌트는 100% 하나하나 직접 만들어야 함.

{ modalIsOpen && <Backdrop onCancel={closeModalHandler}/> }

<Backdrop.js>
function Backdrop (props) {
  return <div className="backdrop" onClick={props.onCancel}/>;
}


🚶 STATE

  • useState(리액트 훅)
    • 애플리케이션에서 사용하고자 하는 상태 등록 가능. 상태 별 결과물 정의.

    • 화면에 보이는 내용을 다이나믹하게 바꿀 때 유용

      • ex) element 추가, 제거. 텍스트 변경. 오버레이 열고 닫기.
    • useState(); : 사용자 정의 함수가 아니라, 컴포넌트 함수에 바로 써줌. () 안에는 초기값을 적어줌.

    • 항상 배열을 리턴. 이 배열에는 두 가지 element가 있다. 이 배열을 상수에 저장하거나, de-structing 가능.

      • const [ modalIsOpen, setModalIsOpen ] = useState();

      • 첫 번째 요소 : 현재 상태를 나타내는 함수
        두 번째 요소 : 상태 업데이트 함수

        • modalIsOpen, setModalIsOpen는 상수이자 element
        • setModalIsOpen은 state의 값을 변경. ModalIsOpen은 상태를 가져옴.


📝 ROUTER

  • npm install react-router-dom : 리액트에 라우팅 기능 추가
  • 속도 빠름, 반응 즉각적.
  • URL에서 변화를 감지하고 URL에 기초해 화면에 보이는 내용을 변경해줌.
  • 라우터를 추가한다는 것은 URL의 변화를 감지한다는 것. 어떤 컴포넌트를 어떤 경로, 어떤 URL에 로딩할지 인지하도록 함.
  • import { BrowserRouter } from 'react-router-dom';
    URL을 감지하게 함.
  • import {Route} from 'react-router-dom';
    URL내의 각기 다른 경로를 정의하고, 각 경로별로 어떤 컴포넌트를 로딩할지 결정.
  • path :경로
  • JSX에 <a>를 이용해 링크를 주면 서버로 계속 요청을 하고 다른 페이지로 넘어가야 되기 때문에 비효율적.
    • react-router-dom의 <Link>를 이용하자
      • 브라우저가 서버로 request하는 것을 방지하고 옮겨 가려는 경로의 URL을 해석해서 브라우저의 URL창을 변경
      • to : <Link>에 이동할 경로를 설정

📝 Form

  • 제출 했을 때 리로드 여부

  • <form onSubmit>

    • 제출 감지
      • 제출 버튼을 누르면 submit 이벤트가 발생. 후 catch.
  • 기본 event(onClick, onSubmit)를 자동으로 캐치함. 이를 위해 리액트는 함수로 자동으로 event를 넘김. 그래서 eventhandler 함수의 인자에 event를 적는 것.

  • event.preventDefault();

    • 브라우저의 기본 동작 차단
    • <form> 태그로 감싸져 있는 submit 버튼을 누를 시 자동으로 새로고침을 함
  • useRef();

    • 사용자의 입력값만 받아올 때
    • from react
    • 참조 객체 생성
    • 이를 통해 생성된 ref 객체는 current 속성을 가짐
    • DOM에 접근하게 해줌 (ref 연결해주면)
  • fetch();

    • HTTP request 보내기 (js함수)
    • promise를 반환
  • useNavigate();

    • 특정 페이지로 이동하게 해줌
  • .json();

    • json -> js
    • 프로미스 반환
  • useEffect();

    • 특정 조건을 만족하면 일부코드를 실행하는 훅
    • 실행 조건을 설정
    • 두 번째 인자: 리액트가 사용자가 두 번째 인자(배열)에 추가한 값을 확인하고 effect 함수를 마지막으로 실행했을 때의 값과 비교.
  • 부수효과

    • 화면에 표시되는 것들에 직접적으로 영향을 미치지 않는 코드
    • useEffect
      실행할 시점 제어
profile
절망의 계곡을 탈출하자

0개의 댓글