CheckPointSoulution Memo

• State는 사용자가 변경할 수 있는 데이터이고 , Props는 사용자가 변경할 수 없는 데이터이다.

• Props는 부모로부터 받은 값이고 불변 값이지만, State는 내부에서 정의되기 때문에 변경이 가능하다.

Acievement Goals

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

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

• React 컴포넌트 (React Component) 에 Props를 전달할 수 있어야 한다.

• 이벤트 핸들러 함수를 만들고 React에서 이용할 수 있어야 한다.

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

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

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

state

• 살면서 변할 수 있는 값
• 컴포넌트의 사용 중 컴포넌트 내부에서 변할 수 있는 값

Props vs State

• Props는 외부로부터 전달 받은 값

• state는 내부에서 변화하는 값

어떤 것이 Props 또는 States에 적합 할까?

• 이름 props
• 성별 props
• 나이 state
• 현재 사는 곳 props
• 취업 여부 props
• 결혼/ 연애 여부 props

정답

• Props : 이름, 성별
• State : 나이, 현재 사는 곳 , 취업여부, 결혼/연애 여부

다음 컴포넌트가 가지는 State는?

Toggle Switch
=> On/ Off 여부
{ isOn: true }
{ inOn: false }
Counter ( 현재 숫자 값 )
{ count: 0 }
{ count: 3 }
{ count: 6 }

외부에 영향을 받지 않고 컴포넌트 안에서 변화하는 값이 state이다.

props의 특징

• 컴포넌트의 속성(property)을 의미한다.
  • Props는 성별이나 이름처럼 변하지 않는 외부로부터 전달받은 값으로, 웹 어플리케이션에서 해당 컴포넌트가 가진 속성에 해당된다.

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

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

• props는 읽기 전용이다.
  • props는 성별이나 이름처럼 외부로부터 전달받아 변하지 않는 값이다. 그래서 props는 함부로 변경될 수 없는 읽기 전용 (read- only) 객체가 되었다.

    읽기 전용 객체가 아니라면 props를 전달받은 하위 컴포넌트에서 props를 직접 수정시 props를 전달 한 상위 컴포넌트의 값에 영향을 미칠 수 있게 된다. 즉, 개발자가 의도하지 않은 side effect가 생기게 되고, 이는 React의 단방향, 하향식 데이터 흐름 원칙 (React is all about one-way data flow down the component hierarchy) 에 위배된다. React에서의 데이터 흐름에서 자세히 배운다.

How to use props

props를 사용하는 방법은 아래와 같이 3단계로 나눌 수 있다.
1. 하위 컴포넌트에 전달하고자 하는 data, property를 정의한다.
2. props를 이용하여 정의된 값과 속성을 전달한다.
3. 전달 받은 props를 렌더링한다.

위 단계에 맞추어 props를 사용하기 위해 우선 <Parent>와 <Child>라는 컴포넌트를 선언하고, <Parent>컴포넌트 안에 <Child 컴포넌트를 작성한다.

function Parent() {
	return (
    	<div className="parent">
          <h1>I'm the parent</h1>
          <Child />
         </div>
       );
     };
 function Child() {
	return (
    	<div className="child"></div>
      );
    };
    [code] `<Parent>,<Child>컴포넌트선언

컴포넌트를 만들었으니 이제 전달하고자 하는 속성을 정의해보자. HTMML에서 속성과 값을 할당하는 방법과 같다.

<a href="www.codestates.com">Click me to visit Code States</a>
[code] HTML 속성과 값 다루는 법

React에서 속성 및 값을 할당하는 방법도 이와 유사하다. 다만, 전달하고자 하는 값을 중괄호{}를 통해 감싸주면 된다.

<Child attribute={value} />
[code] React에서 JSX속성 및 값을 할당하는 방법

위 방법을 이용하여 text라는 속성을 선언하고, 이 속성에 "I'm the eldest child"
라는 문자열 값을 할당하여 <child>컴포넌트에 전달해보자

<Child text{"I'm the eldest child"} />

자, 이제 <Parent> 컴포넌트에서 전달한 I'm the eldest child라는 문자열을 <child>컴포넌트에서 받아오자. 방법은 함수에 인자를 전달하듯이 React컴포넌트에 props를 전달하면 되고, 이 props가 필요한 모든 데이터를 가지고 오게된다.

function Child(props) {
	return (
      <div className="child"></div>
     );
    };
  `<child> 컴포넌트에서 props argument using example`

props를 전달 받았으니, 마지막으로 props를 렌더링 해야한다. props를 렌더링 하려면 JSX안에 직접 불러서 사용하면 된다. 다만, props는 객체라 하였고 , 이 객체의 key,value는 <Parent> 컴포넌트에서 정의한 {attribute : value의 형태를 띄게 된다.
따라서 Javascript에서 obj의 value에 접근할 때 dot notation을 사용하는 것 과 동일하게 props의 value 또한 dot notation으로 접근 할 수 있다.
아래처럼 props.text를 JSX에 중괄호와 함께 작성하면 잘 작동한다.

function child(props) {
	return (
    	 <div className="child">
          <p>{props.text}</p>
         </div>
       );
     };
     [code] <Child> 컴포넌트에서 props.text 렌더링 예시

State

어플리케이션의 상태..
State & Props 영상에서는 state는 Toggle Switch나 Counter처럼 컴포넌트 내부에서 변할 수 있는 값이다.

State Hook, useState

React에서는 이러한 state를 다루는 방법 중의 하나로 useState라는 특별한 함수를 제공한다. 이 함수의 사용방법과 작동방식을 알아보자

funcion CheckboxExample() {
// 새로운 state 변수를 선언하고, 여기서는 이것을 isChecked라 부르겠다.
	const [isChecked, setIsChecked] = useState(false);
 [code] useState 문법예시

• 먼저 useState를 컴포넌트 안에서 호출해준다. useState를 호출한다는 것은 state라는 변수를 선언하는 것과 같으며, 이 변수의 이름은 아무 리음으로 지어도 된다. 일반적으로 일반 변수는 함수가 끝날 때 사라지지만 , state변수는 React에의해 함수가 끝나도 사라지지 않는다.

const [state 저장 변수, state 갱신 함수] = useState(상태 초기 값);
[code] useState 수도코드

• useState를 호출하면 배열을 반환하는데, 배열의 첫번째 요소는 현재 state 변수이고, 두번째 요소는 이 변수를 갱신할 수 있는 함수이다. useState 의 인자로 넘겨주는 값은 state의 초기값이다.

function CheckboxExample() {
	const [isChecked, setIsChecked] = useState(false);
    // const [state 저장변수, state 갱신함수] = useState(state 초기 값);

• • const [isChecked, setIsChecked] = useState(false);에서 isChecked 와 setIsChecked는 state저장 변수와 state 갱신함수를 의미한다. isChecked라고 부르는 state 변수를 선언하고 useState()에 이 변수를 아직 체크되지 않은 상태인 false로 초기화 한다. React는 이 변수를 리렌더링할때 기억하고, 가장 최근에 갱신된 값을 제공한다. isChecked변수의 값은 setIsChecked함수를 호출하여 갱신할 수 있다.

<span>{isChecked ? "Checked!" : "Unchecked"}</span>
[code] JSX에서 삼항연산자 사용예시

• 이 state 변수에 저장된 값을 사용하려면 JSX 안에 직접 불러서 사용하면 된다.
  여기서는 isChecked가 boolean 값을 가지기 때문에 true or false여부에 따라 다른 결과가 보이도록 삼항연산자를 사용한다.

function CheckboxExample() {
	const {isChecked, setIsChecked] = useState(false);
    const handleChecked = (event) => {
    	setIsChecked(event.target.checked);
    };
    return (
    <div className="App">
    	<input type="checkbox" checked={isChecked} onChange={handleChecked} />
        <span>{isChecked ? "Checked" : "Unchecked"}</span>
    </div>
  );
}

• state를 갱신하려면 변수를 갱신할 수 있는 함수인 setIsChecked를 호출한다. 다만, 이 함수를 직접 호출하는 것이 아닌, 사용자의 입력값을 처리하는 onChange이벤트를 이용한다. 사용자가 입력을 하면 onChange이벤트가 이벤트 핸들러 함수인 handleChecked를 호출하고, 이 함수가 setIsChecked를 호출하게 된다.
  setIsChecked가 호출되면 호출된 결과에 따라 isChecked변수가 갱신되며 , React는 새로운 isChecked변수를 CheckboxExample 컴포넌트에 넘겨 해당 컴포넌트를 다시 렌더링 한다.

• 이처럼 useState를 이용하면 컴포넌트 내의 state를 손쉽게 다룰 수 있다. 그럼 다음 이벤트처리 Hands-on을 통해 더욱 다양한 state다루기와 이벤트 핸들링에 대해 연습헤보자.

이벤트 처리 Hands-on

React의 이벤트 처리 ( 이벤트 핸들링 ; Event handling) 방식은 DOM의 이벤트 처리 방식과 유사하다. 단 , 몇가지 문법 차이가 있다.

• React에서 이벤트는 소문자가 아닌 카멜 케이스를 사용한다.

• JSX를 사용하여 문자열이 아닌 함수로 이벤트 처리 함수 ( 이벤트 핸들러; Event handler)를 전달한다.

예를 들어 HTML에서 이벤트 처리 방식이 아래와 같다면,

<button onclick="handleEvent()">Event</button>

React의 이벤트 처리 방식은 아래와 같다.

<button onClick={handleEvent}>Event</button>

React에서 이벤트를 처리하는 기본방식은 위와 같다. 다음은 자주 사용되는 이벤트 처리에 대한 예시이다.

onChange

<input> <textarea> <select>와 같은 폼 엘리먼트는 사용자의 입력값을 제어하는데 사용된다. React에서는 이러한 변경될 수 있는 입력값을 일반적으로 컴포넌트의 state로 관리하고 업데이트 한다. onChange이벤트가 발생하면 e.target.value를 통해 이벤트 객체에 담겨있는 input값을 읽어올 수 있다. 컴포넌트 return 문 앞의 input태그에 value와 onChange를 넣어 주었다. onChange는 input의 텍스트가 바뀔때마다 발생하는 이벤트이다. 이벤트가 발생하면 handleChange함수가 작동하며, 이벤트 객체가 담긴 input값을 setState를 통해 새로운 state으로 갱신한다.

function NameForm() {
	const [name. setname] = useState("");
    const handleChange = (e) => {
    	setName(e.target.value);
   }
   return (
     <div>
       <input type="text" value={name} onChange={handleChange}></input>
       <h1>{name}</h1>
       </div>
     )
   };

onClick

onClick이벤트는 말 그래도 사용자가 클릭이라는 행동을 하였을 때 발생하는 이벤트이다. 버튼이나 <a> tag를 통한 링크 이동 등과 같이 주로 사용자의 행동에 따라 어플리케이션이 반응해야할 떄에 자주 사용하는 이벤트이다. 그럼 위의 onChange예시에 버튼을 추가해서 버튼 클릭시 input tag에 입력한 이름이 alert을 통해 알림창이 팝업되도록 코드를 추가해 보자.

function NameForm() {
	const [name, setname] = useStates("");
    const handleChange = (e) => {
    	setname(e.target.value);
    }
    return (
      <div>
         <input type="text" value={name} onChange={handleChange}></input>
         <button onClick={alert(name)}>Button</button>
         <h1>{name}</h1>
      </div>
     );
   };

위와 같이 onClick 이벤트에 alert(name) 함수를 바로 호출하면 컴포넌트가 렌더링 될 때 함수 자체가 아닌 함수 호출의 결과가 onClick에 적용된다. 때문에 버튼을 클릭할 때가 아닌 , 컴포넌트가 렌더링 될 때에 alert이 실행되고 따라서 그 결과인 undefined (함수는 리턴값이 없을 때 undefined를 반환한다.) 가 onClick에 적용되어 클릭했을 때 아무런 결과도 일어나지 않는다. 따라서 onClick이벤트에 함수를 전달 할 때는 함수를 호출하는것이 아니라 아래와 같이 리턴문 안에서 함수를 정의하거나 리턴문 외부에서 함수를 정의 후 이벤트에 함수 자체를 전달 해야한다. 단, 두 가지 방법 모두 arrow function 을 사용하여 함수를 정의하여야 해당 컴포넌트가 가진 state에 함수들이 접근 할 수 있다.

// 함수 정의하기
return (
	<div>
    ...
    <button onClick={() => alert(name)}>Button</button>
    ...
    </div>
   );
 };
 // 함수 자체를 전달 하기
 const handleClick = () => {
 	alert(name);
  };
  return (
  <div>
   ...
   <button onClick={handleClick}>Button</button>
   ...
   </div>
  );
};