1. Props와 State

01. Props(Properties)

Props

• 기본적으로 Component에 원하는 값을 넘겨줄 때 사용하며, 넘겨줄 수 있는 값은 변수,함수,객체,배열 등 JavaScript의 요소라면 제한이 없음.
• 주로 Component의 '재사용'을 위하여 사용함.
• Props는 읽기 전용이니 값을 임의로 변경해서 사용하면 안됨. 새로운 변수를 생성해서 값을 복제한다음에 사용해야함.
  

• 사진 출처 : SW엔지니어트랙 4기

DOM Element의 Attributes

• 기본적인 DOM Element(div,span 등)들의 Attribute는 camel case로 작성한다.
  e.g. tabIndex, calssName 등

• 그러나 'data-' 또는 'aria-'로 시작하는 Attribute는 예외
  e.g. data-type, aria-label

• HTML의 Attribute와 다른 이름을 가지는 Attribute가 있음.
  e.g. class -> className, for -> htmlFor

• HTML의 Attribute와 다른 동작 방식을 가진 Attribute가 있음.
  e.g. checked(defaultChecked), value(defaultValue), style 등

  {/* HTML에서는 checked&value가 초기값을 의미하지만, React에서는 현재값을 의미함.   */}
  (<input type='checkbox' checked={false}/>)
  ------
  {/* 초기값의 의미를 사용하고 싶다면 defaultChecked를 사용.    */}
  (<input type='checkbox' defaultChecked={false}/>)
  

• React에서만 쓰이는 새로운 Attribute가 있음
  e.g. key, dangerouslySetInnerHTML 등

  • Key는 React가 어떤 항목을 변경,추가, 또는 삭제할지 식별하는 것을 도움.
  • Key는 엘리먼트에 안정적인 고유성을 부여하기 위해 배열 내부의 Element에 지정해야함.

  const Names = () => {
      const names = [
        { key: '1', value: '민수'},
        { key: '2', value: '영희'}, 
        { key: '3', value: '길동'},
      ]
      return (
          <div>
              {names.map((item) => (<li key={item.key}>{item.value}</li>)}
          </div>
      )
  }
  

02. State

State란?

• State는 Component내에서 유동적으로 변할 수 있는 값을 저장합니다.
• 개발자가 의도한 동작에 의해 변할 수도 있고, 사용자의 입력에 따라 새로운 값으로 변경될 수도 있음.
• state값이 변경되고 재렌더링이 필요할 경우 React가 자동으로 계산하여 변경된 부분을 렌더링함.

유의할점

import { userState } from 'react';

//이런식으로 직접 대입해서 변경하면 안됨!!!!!!!!! (에러가 발생하진 않으나, 카운트 값이 증가되지 않음. 
function Example() {
  let [count, setCount] = useState(0);
  return (
  	<div>
      <p> 버튼을 {count}번 눌렀습니다.</p>
      <button onClick = {() => {count = count + 1;}}> 클릭 </button>
    </div>  
  )
}

• State 값을 직접 변경하면 안됨
  • State 값을 직접 변경하게되면 React가 Component를 다시 렌더링할 타이밍을 알아차리지 못함.
  • 반드시setState 함수를 이용해 값을 변경해야함.
  • setState 함수를 호출할 때 React에게 '다시 렌더링해주세요.'라는 명령이 내려짐

//첫번째 방법 :setState 내에 변경할 값을 넣기
const [count, setCount] = useState(0);
setCount(count + 1);

// 두번째 방법 :setState에 함수를 넣기
const [count, setCount] = userState(0);
setCount((current) => {return current + 1})

• 현재 값을 기반으로 State를 변경하고자 하는 경우 함수를 넣는 방법을 권장.

const [user, setUser] = useState({naem:'민수', grage: 1})
setUser((current)=>{
  current.grade = 2;
  return curren;
})

• Object를 갖는 State를 만들 때 주의사항
  • user object안의 grade가 변경되었지만 user자체는 변경되지 않았기 때문에 재렌더링이 되지 않음.
    
  • 사진 출처 : 엘리스SW엔지니어트랙4기

    const [user, setUser] = useState({naem:'민수', grage: 1})
    setUser((current)=>{
      const newUser = {...current} // 펼쳐서 객체로 복사
      newUser.grade = 2;
      return newUser;
    })

2. 이벤트 처리

01. 이벤트 소개

이벤트란?

• 이벤트란, 웹브라우저가 알려주는 HTML요소에 대한 사건의 발생
• 유저의 행동에 의해서 발생하거나, 개발자가 의도한 로직에 의해 발생할 수도 있음.
  

• 사진출처 : 엘리스 SW엔지니어트랙4기

많이 사용되는 DOM Event

• onClick
• onChange
• onKeyDown, onKeyUP, onKeyPress
• onDoubleClick
• onFocus
• onBlur
• onSubmit

02. 컴포넌트 내 이벤트 처리

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

const myForm = () => {}