React -2

children

<Mycomponent>...</Mycomponent>

return <MyComponents name = {15} num = {3} >
    <h1>반갑습니다.</h1>
    </MyComponents>

h1태그는 MyComponents내부 안에 있음.

state

컴포넌트 내부에서 바뀔 수 있는 값을 의미한다.
props는 컴포넌트가 사용되는 과정에서 부모컴포넌트가 설정하는 값.
컴포넌트 자신은 해당 props를 읽기 전용으로 사용

함수형 컴포넌트에서
useState(기본값)
배열값->
0 = 상태 값
1- 상대값 변경 함수 -> 다시 랜더링

• 컴포넌트 재 랜더링 기준 -
  함수형 컴포넌트 다시 호출,
  클래스형 컴포넌트 -render 함수 다시 호출

1)props 값이 변경
2)state 값이 변경
3)부모컴포넌트가 랜더링 되면 -> 자식 컴포넌트도 함께 랜더링
4)클래스형 컴포넌트 this.forceUpdate(): 강제 랜더링

import { useState } from "react";

const Counter = () => {
    const [number, setNumber] = useState(0);
};

export default Counter;

• 값 변경
  //변경안됨
  ->주소값이 같기 때문에 react에서 랜더링이 되지 않음

const Profile = () => {
  const [data, setData] = useState({
    name: '이이름',
    age: 40,
  });

  const changeProfile = () => {
    data.name = "김이름"
    data.age = 30;
    setData(data);
  };

//변경됨
-> 객체를 다르게 변경했기 때문에 정상적으로 적용됨

 const changeProfile = () => {
 	 //setData({ name: '김이름', age: 30 })
  	setData({...data, name: '김이름', age: 30})
  };

이벤트 객체

1. 이벤트 처리기를 등록하는 방법
   -document 객체에 "on이벤트명" 속성에 이벤트 핸들러함수를 직접 대입

• addEventListener("이벤트명", 이벤트 핸들러 함수, 캡쳐링 여부 - false(기본값))

  캡쳐링 여부 -
  false : 버블링단게에서 이벤트 전파
  true : 캡쳐링 단계에서 이벤트 전파

• removeEvenListener 메서드로 이벤트 삭제하기

OnContextMenu: 마우스 우클릭 이벤트

함수 호출

//무한호출됨

onClick={changeColor('red')}

//정상적을 호출됨

onClick={() => changeColor('red')}

-DOM 요소에만 이벤트를 설정할 수 있음.
(div, input..)
이벤트 이름은 카멜표기법