01 Props

• 기본적으로 component에 원하는 값을 넘겨줄 때 사용하며
  넘겨줄 수 있는 값은 변수, 함수, 객체, 배열 등 js 요소라면 제한이 없다.
• 주로 컴포넌트의 재사용을 위해 사용한다.

//컴포넌트 생성
const Hello = (props) => {
  return <div>Hello, {props.name}</div>;
}

//컴포넌트 사용
const App = () => {
  return <div>
    <Hello name="하나" />
    <Hello name="두리" />
  </div>;
}

props는 변경 지양

props의 값을 변경해서 사용하고 싶다면 새로운 변수를 생성한 다음
그 변수를 사용한다.

• 재할당 금지!!

DOM의 element의 attribute

• 기본적은 DOM element(div, span 등)들의 attribute는 camel case로 작성 - className
• data- aria- 로 시작하는 attribute는 예외 - data-type, aria-label
• html의 attribute와 다른 이름을 가지는 attribute가 있다.
  class --> className, for --> htmlfor
• html 의 attribute와 다른 동작 방식을 가진 attribute가 있다.
  -checked(defaultChecked), value(defaultValue), style

  html에서 checked 또는 value는 해당 값이 '초기값'
  리액트 내에서는 '현재값' ( defaultChecked가 '초기값')

• 리액트에서만 쓰이는 새로운 attribute가 있다. - key
  -- key는 리액트가 어떤 항목을 변경, 추가, 삭제할 지 식별하는 것을 돕는다.
  -- 엘리먼트에 안정적인 고유성을 부여하기 위해 배열 내부의 elem에 지정해야 한다.
  -- 배열 안에서 형제 사이에서 고유해야 하고 전체 범위에서 고유할 필요는 없다.
  -- 두 개의 다른 배열을 만들 때 동일한 key를 사용할 수 있다.

02 State

State란?

State는 컴포넌트 내에서 유동적으로 변할 수 있는 값을 저장한다.

• 개발자가 의도한 동작에 의해 변할 수도 있고
• 사용자의 입력에 따라 새로운 값으로 변경될 수도 있다.
• state값이 변경되고 재렌더링이 필요한 경우 React가 자동으로 계산하여 변경된 부분을 렌더링 해준다.

import {useState} from 'react';

function Counter() {
  const [count, setCount] = useState(0);
  return (
    <div>
    	<p>버튼을 {count}번 눌렀습니다.</p>
		<button onClick={() => setCount(count+1)}>클릭</button>
	</div>
  );
}

• useState를 사용하기 위해서는 코드의 최상단에
  import {useState} from 'react';를 React패키지로부터 import해와야 한다.

const App = () => {
	const [value, setValue] = useState(초기값);
	return ...
}

State값을 직접 변경하면 안된다.

state값을 직접 변경하게 되면 react가 컴포넌틑 다시 렌더링할 타이밍을 눈치채지 못한다.

• setState()함수를 이용해 값을 변경한다.

State를 변경하는 두 가지 방법

01 setState내에 변경할 값을 넣기

const [count, setCount] = useState(0);
setCount(count + 1);

02 setState에 함수를 넣기

함수를 넣으면 return값으로 state가 변경된다.
현재 값을 기반으로 State값을 변경하고 싶을 때는 함수를 넣는 방법을 사용하자

const [count, setCount] = useState(0);
setCount((current) => {
  return current +1;
});

Object를 갖는 State를 만들 때

const [user, setUser]= useState({name:'고메리', age:1});
setUser((current) => { 
  current.age = 2;  // 객체로 선언된 내부가 변경됨
  return current;
})
// 이러면 리액트가 재렌더링을 못한다 ㅠㅠ

//이렇게 해야합니다!!!
const [user, setUser]= useState({name:'고메리', age:1});
setUser((current) => { 
  const newUser = { ...current}  //객체를 복사해 와서
  newUser.age = 2;  // 새 객체의 value바꿔주고,
  return newUser;  // 새로운 객체를 return해야 리액트가 알아차림
})

03 이벤트 처리

01 이벤트 소개

이벤트란

웹 브라우저가 알려주는 html요소에 대한 사건의 발생을 의미

• 유저의 행동에 의해 발생할 수도 있고
• 개발자가 의도한 로직에 의해 발생할 수도 있다.
• 발생한 이벤트를 js를 이용해 대응할 수 있다.

이벤트 핸들링 방법

1. 핸들링 함수 선언 : 별도의 핸들링 함수를 선언하고 element에 넘겨줌

const App = () => {
  const handleClick= () => {
    alert('클릭했슈');
  }
  return (
    <div>
    	<button onClick={handleClick}> 클릭</button>
	</div>
  );
};

2. 익명함수로 처리 : 이벤트를 할당하는 부분에서 익명 함수를 작성함

const App =() => {
  return (
    <div>
    	<button onClick={() => {alert('클릭했슈')}> 클릭</button>
	</div>
  );
};

이벤트 객체

• DOM element의 경우 핸들링 함수에 이벤트 objcet를 매개변수로 전달한다.
• 이벤트객체를 이용하여 이벤트 발생 원인, 이벤트가 일어난 element에 대한 정보를 얻을 수 있다.

많이 쓰는 DOM 이벤트

• onClick : elem.클릭했을 때

• onChange : elem. 내용이 변경 시 (input의 텍스트를 변경, 파일선택 등)

• onKeyDown/ onKeyUp, onKeyPress : 키보드 입력 발생 시

• onDoubleClick : elem. 더블 클릭시

• onFocus : elem.에 포커스 되었을 때

• onBlur : elem.에 포커스 잃었을 때

• onSubmit : form elem.에서 submit했을 때

02 컴포넌트 내 이벤트 처리

DOM input값을 state에 저장하기

const App = () => {
  const [inputValue, setInputValue] = useState('defaultValue');
  
  const handleChange = (event) => {
    setInputValue(event.target.value);
  }
  
  return (
    <div>
    	<input onChange={handleChange} defaultValue={inputValue} />
    	<br />
    	입렵한 값은 : {inputValue}
	</div>
  );
};

여기서 event.target은 이벤트의 원인이 되는 elem.

여러 input 동시에 처리하기

object의 key를 동적으로 할당하는 방법
state를 여러 개 선언하는 대신 object를 활용하여 여러 개의 input을 하나의 state로 관리할 수 있다.

const App = () => {
	const [user, setUser] = useState({name: '메리', age: 1});
  
  const handelChange = (event) => {
    const { name, value } = event.target;
    const newUser = { ...user};
    newUser[name] = value;
    setUser(newUser);
  };
  
  return (
    <div>
    	<input name="name" onChange={handleChange} value={user.name} />
    	<br />
    	<input name='age' onChange={handleChange} value={user.age} />
      	<p>{user.name}님은 {user.age}살 입니다.</p>
	</div>
  );
};

03 다른 컴포넌트로 이벤트 전달

이벤트 명명법 (권장사항)

• "on"+동사 or "on" +명사 + 동사
  예 :) onClick, onButtonClick 등
• 핸들링 함수의 명명법 : "handle" + (명사 +)동사