[TIL] React state&props, twittler 과제(2)

ㅜㅜ·2022년 9월 30일

Today I learn

목록 보기

26/77

props

props는 컴포넌트의 속성으로, 외부(부모나 상위 컴포넌트)로부터 전달 받은 값을 말한다.

React 컴포넌트는 자바스크립트의 함수와 클래스로 props를 함수의 인자처럼 전달 받아 이를 기반으로 화면에 어떻게 표시되는지 기술하는 리액트 요소를 반환. 컴포넌트가 최초 랜더링 될 때 화면에 출력하고자하는 데이터 담은 초기값으로 사용할 수 있음.

props는 객체 형태
props는 읽기 전용 (side effect: props를 수정할 경우 전달해준 상위 컴포넌트 값에 영향을 미칠 가능성)
props는 immutable 데이터
props 속성의 이름은 임의로 지정해줄 수 있음 (꼭 'props'가 아니어도 됨)

props 사용법

하위 컴포넌트에 전달하고자 하는 값과 속성을 정의
props를 이용해 정의된 값과 속성을 전달
전달받은 props 랜더링

const App = (){
  const itemOne = "React는";
  const itemTwo = "처음이라";
  const itemThree = "어렵군요";
  
  return (
    <div className = "App">
    <Learn text={itemOne + ' ' + itemTwo + ' '+itemThree/>
    //Learn에 전달하고자 하는 속성 text와 그 값 
    </div>
    );
};

const Learn = (props) => {
  return <div className="Learn">{props.text}</div>;
};
//화면에 "React는 처음이라 어렵군요"가 랜더링 됨. 
//컴포넌트에게 전달되는 props 는 파라미터를 통하여 조회 할 수 있음.
//props 는 객체 형태로 전달되며, 위의 예시에서는 props의 text 값을 조회한 것.

state

state는 컴포넌트 내부에서 변할 수 있는 값이다.
예를 들어 토글 스위치나 카운터 같은 변하는 값을 state로 다루게 된다.

(참고 : React 16.8 버전에 Hook이 추가되면서 클래스 컴포넌트를 작성하지 않아도 state를 사용할 수 있게 됨.)

React에서는 useState를 이용해 state를 다룰 수 있는데,
useState를 사용하기 위해서는 import를 해주고, useState를 컴포넌트 안에서 호출할 수 있다.
useState는 호출하면 배열을 반환한다. 배열의 0번째 요소는 현재 state변수, 1번째 요소는 이 변수를 갱신할 수 있는 함수가 된다.

const [state를 저장하는 변수, state를 갱신하는 함수] = useState(상태 초기 값);

//ex
const [name, setName] = useState("");
//name은 state 저장하는 변수
//setName은 name을 변경하는 함수
//useState는 state hook
//""는 state의 초기값

state 갱신하기 예시

function inputNameExample(){
const [name, setName] = useState("");

function handleChangeName = (event) =>{
  setName(event.target.value)
};
  return (
    <div className="APP">
    <input type="text" value={name} onChange={handleChangeName}/>
    //React에서 이벤트는 소문자가 아닌 카멜 케이스 사용
    //JSX를 사용해 문자열이 아닌 함수로 위의 '{handleChangeName}와 같이' 이벤트 처리 함수 전달
    <h1>{name}</h1>
	</div>
)
};

//이벤트에 함수를 전달할 때는 함수를 호출하는 게 아니라 리턴문 안에서 함수를 정의하거나, 리턴문 외부에서 함수를 정의한 후 함수 자체를 전달한다.(후자가 위의 예시에서 쓴 방법)

return (
  //(생략)
<input type="text" value={name} onChange={(event)=>{setName(event.target.value)}}
//(후략)
)};
//리턴문 안에서 함수를 정의하는 방법

state hook 사용시 주의점

React 컴포넌트는 state가 변경되면 새롭게 호출되고, 리랜더링 된다.
React state는 상태 변경 함수 호출로 변경해야 한다.
(강제로 변경 시도하면 리랜더링 x or state가 제대로 변경 x.)
(강제로 변경 예시 : state.push(1), state[1]=2, state='wrong state')

React 데이터 흐름

페이지를 만들기 전 컴포넌트를 먼저 만들고 컴포넌트들을 조립하는 것 : 상향식
하나의 컴포넌트는 한 가지의 일만 한다 : 단일 책임 원칙
데이터는 위에서 아래로 흐른다 : 하향식 데이터 흐름
단방향 데이터 흐름
state는 최소화하는 것 권장
- 부모로부터 props를 통해 전달되면 not state
- 시간이 지나도 변하지 않으면 not state
- 컴포넌트 안의 다른 state나 props를 통해 계산 가능하면 not state
state의 위치는
- state가 특정 컴포넌트에서만 유의미하다면 특정 컴포넌트에 두기
- 하나의 state 기반으로 두 컴포넌트가 영향 받는다면 공통 소유 컴포넌트 찾아 그곳에 두기

twittler 과제

오늘 과제는 페어분이 구글링 천재셔서 버스를 얻어 타고 해결했기 때문에 조금 더 복습이 필요하다.
우선 앞선 React Intro, React SPA, React Router 유닛들에서 배운 내용을 가지고 컴포넌트들을 만들고, 사이드바에 링크를 연결해서 페이지가 넘어가도록 하는 것까지는 어렵지 않게 구현했다.

어려웠던 건 오늘 배운 useState와 props를 이용하는 부분이었다.