TIL 15일차 - [React] 기초

tamagoyakii·2021년 10월 24일
0

TIL

목록 보기
15/31
post-thumbnail

🍏 Achievement Goals 🍏

🍒 React State & Props

  • state, props의 개념에 대해서 이해하고, 실제 프로젝트에 바르게 적용할 수 있다.

    state : 내부에서 변화하는 값이다.
    props : 외부로부터 전달받은 값이다.
    props의 특징은 부모(상위) 컴포넌트에서 전달 받은 값이며, 객체 형태이고 읽기 전용(read-only)이라는 것이다.

  • React 함수 컴포넌트(React Function Component)에서 state hook을 이용하여 state를 정의 및 변경할 수 있다.

    const [state 저장 변수, state 갱신 함수] = useState(상태 초기 값);
    먼저 위의 형식으로 사용할 state 변수를 선언해준다.

    const [isChecked, setIsChecked] = useState(false);

    그 다음 이벤트를 다룰 함수가 상태를 갱신하도록 만들어준다.

    
    const handleChecked = (event) => {
        setIsChecked(event.target.checked);
    }

    마지막으로 사용할 함수를 input의 속성으로 넣어준다.

    <input type="checkbox" checked={isChecked} onChange={handleChecked} />
  • React 컴포넌트(React Component)에 props를 전달할 수 있다.
    1. 하위 컴포넌트에 전달하고자 하는 값과 속성을 정리한다.
    2. props를 이용하여 정의된 값과 속성을 전달한다.
    3. 전달 받은 props를 렌더링한다.

    ex)

    
    <Child text={'Hello World!'} /> // 1.
    function Child(props) = {	// 2.
        return (
        	<div className='child'>
    	    <p>{props.text}</p> // 3.
    	</div>
        );
    };

    위의 코드는 아래처럼 값을 tag 사이에 넣어 쓸 수도 있다.

    
    <Child>Hello World!</Child> // 1.
    function Child(props) = {	// 2.
        return (
        	<div className='child'>
    	    <p>{props.children}</p> // 3.
    	</div>
        );
    };
  • 이벤트 핸들러 함수를 만들고 React에서 이용할 수 있다.

    Yes ! 😋

  • 실제 웹 애플리케이션의 컴포넌트를 보고 어떤 데이터가 state이고 props에 적합한지 판단할 수 있다.

    state인지 판별하는 방법에는 세 가지가 있다.

    1. 부모로부터 props를 통해 전달됩니까?
    2. 시간이 지나도 변하지 않나요?
    3. 컴포넌트 안의 다른 state나 props를 가지고 계산할 수 있나요?

    위의 세 질문 중 하나라도 yes가 나온다면 state가 아니다.

  • 실제 웹 애플리케이션 개발 시 적합한 state와 props의 위치를 스스로 정할 수 있다.

    Yes ! 😌

  • React의 단방향 데이터 흐름(One-way data flow)에 대해 자신의 언어로 설명할 수 있다.

    우리는 props를 이용하며 프로그램을 짜기 때문에 데이터는 위에서 아래로 흐르게 된다. 이를 하향식(top-down) 즉 단방향 데이터 흐름(One-way data flow)이라고 이야기한다.

🍒 React Twittler State & Props

이벤트 핸들러 때문에 애먹었다. 조금 더 친해지자 ^^

0개의 댓글