9/30 TIL

최준호·2022년 9월 30일
0

< 목차 >

  1. props
  2. usestate
  3. 회고

1. props

props 특징

  • 상위 컴포넌트로부터 전달받은 값이다.
    React 컴포넌트는 JavaScript 함수와 클래스로, props를 함수의 전달인자(arguments)처럼 전달받아 이를 기반으로 화면에 어떻게 표시되는지를 기술하는 React 엘리먼트를 반환한다. 따라서, 컴포넌트가 최초 렌더링 될 때 화면에 출력하고자 하는 데이터를 담은 초깃값으로 사용할 수 있다.

  • 객체 형태이다
    props로 어떤 타입의 값도 넣어 전달할 수 있도록 props는 객체의 형태를 지닌다.

  • props는 읽기 전용이다.
    props는 성별이나 이름처럼 외부로부터 잔달받아 변하지 않는 값이다. 그래서 props는 함부로 변경될 수 없는 읽기 전용 객체이다. 함부로 변경되지 않아야 되기 때문이다.


2. useState

  • React에서 state를 다루는 방법 중 하나로 usestate라는 특별한 함수를 제공한다.

  • useState를 작동하기 위해서는 React로부터 useState를 불러와야한다. importuseState를 불러온다.

import { useState } from "react";
  • useState 를 컴포넌트 안에서 호출해 줍니다. useState 를 호출한다는 것은 "state" 라는 변수를 선언하는 것과 같으며, 이 변수의 이름은 아무 이름으로 지어도 된다. 일반적인 변수는 함수가 끝날 때 사라지지만, state 변수는 React에 의해 함수가 끝나도 사라지지 않는다.
  • useState 를 호출하면 배열을 반환하는데, 배열의 0번째 요소는 현재 state 변수이고, 1번째 요소는 이 변수를 갱신할 수 있는 함수이다. useState 의 인자로 넘겨주는 값은 state의 초깃값이다.
const [state 저장 변수, state 갱신 함수] = useState(상태 초기 값);
  • isChecked : state를 저장하는 변수
  • setIsChecked : state isChecked 를 변경하는 함수
  • useState : state hook
  • false : state 초깃값
  • 이 state 변수에 저장된 값을 사용하려면 JSX 엘리먼트 안에 직접 불러서 사용하면 된다. boolean 값을 가지는 경우에는 true or false 여부에 따라 다른 결과가 보이도록 삼항연산자를 사용해야한다.
<span>{state 저장 변수 ? state 갱신 함수 : "Unchecked"}</span>

3. 회고

오늘은 react에서도 중요한 챕터인 propsuseState를 학습했었다. 원래 코드를 작성할 때 나는 useState를 선호하는 편이었는데 useState만을 쓰면 안되는 것도 알았고 상황에 따라 propsuseState를 적절히 써야하는 것도 알게 되었다. 오늘 과제인 twitter 컴포넌트를 useState로 구현하는것도 재밌었다. 다만 아직 react를 학습한지 얼마 안되서 그런지 문법적으로 이해가 안되는 부분이나 어려운 부분이 있다ㅜㅜ... 이러한 부분은 이번주말에 다시한 번 학습하고 직접 컴포넌트를 구현해봐야겠다!

profile
LV1 프론트엔드 엔지니어

0개의 댓글