[React] Props / 이벤트 처리

Props

---

: 컴포넌트(자식)에 데이터를 전달하는 방식

 

-부모 컴포넌트

function App() {
    return (
    	<div>
            //Props { content:"Save Changes", food:"banana" } 전달
            <Btn content="Save Changes" food="banana"/>
        </div>
    )
 }

 

-자식 컴포넌트

function Btn(props) {//전달받은 properties
    console.log(props); //Object {content: 'Save Changes', food: 'banana'}
    console.log(props.content); //Save Changes
    console.log(props.food); //banana
}

값사용 때 마다 점표기법 쓰기 여간 불편

 

1. 구조 분해 할당

function Btn(props) {
    const { content, food } = props;

    console.log(content, food);
}

2. shortcut

const Btn = ({content, food}) =>{
    console.log(content); //Save Changes
    console.log(food); //banana
};

3. 스프레드 연산자

function App() {
  const props = {
    content : "Save Changes",
    food : "banana",
    color: ["red", "blue", "green"]
  }

  return (
    <div>
      <h1>Welcome!</h1>
      <Btn {...props}/>
    </div>
  );
}

function Btn({content, food, color}) {
    return(
        <div>{content}와 {food}와 {color[0]}, {color.length}</div>
    );
}

4. 기본값 설정

function App() {
  const props = {
    content : "Save Changes",
    food : "banana"
  }

  return (
    <div>
      <h1>Welcome!</h1>
      <Btn {...props}/>
    </div>
  );
}

function Btn({content, food, color}) {
    return(
        <div>{content}와 {food}와 {color[0]}, {color.length}</div>
    );
}

Btn.defaultProps = {
    color: [],
}

5. 컴포넌트 전달

function Child(){
  return <div>child component</div>;
}
function App() {
  return (
    <div>
      <h1>Welcome!</h1>
      <Btn>
        <Child />
      </Btn>
    </div>
  );
}

function Btn({ children }) {
    console.log(children); //object

    return(
        <div>{children}</div> //<div>child component</div>
    );
}

 

이벤트 처리

---

이벤트? 웹 페이지에서 일어나는 사용자의 행위(ex. 버튼클릭)

 

-javascript

<script>
    function onClick() {
    	alert("바보");
    }
</script>
    
<button onclick="onClick()">클릭!</button>

 

-react 

function Btn() {
    function onClick(){
        alert("메롱");
    }
    return(
        <button onClick={onClick}>클릭!</button>
    );
}

 

다른점

onclick="onClick()" ←JS

onClick={onClick}    ←React : 카멜케이스, 함수 그자체{} 참조전달, 이벤트발생시 해당 함수 호출실행

주의! onClick={onClick()}면 클릭없이 바로 실행되버림

 

이벤트 객체 e

function Btn() {
    function onClick(e){
        console.log(e); //이벤트 객체, 많은 프로퍼티..
        console.log(e.target); //<button name="버튼1"></button>
        console.log(e.target.name); //버튼1,버튼2
    }
    return(
        <div>
            <button name="버튼1" onClick={onClick}>버튼1</button>
            <button name="버튼2" onClick={onClick}>버튼2</button>
        </div>
    );
}

 

target VS currentTarget

---

target : 이벤트가 실제로 발생한 요소

currentTarget :  이벤트가 현재 등록된 요소

function onClick(e) {
  console.log(e.target); //<button name="버튼"></button>
  console.log(e.currentTarget); //<div ></div>
}

export function App() {
  return (
    <div onClick={onClick}>
      <button name='버튼'>sdf</button>
    </div>
  );
}

 

* TypeScript에서 e.target 타입

target : EventTarget

currentTarget : HTMLElement  //HTMLButtonElement라고 타입이 추론되기 때문

function onClick(e:React.MouseEvent<HTMLButtonElement>) {
  //console.log(e.target.name); 타입 몰라 오류
  //1. currentTarget 사용
  console.log(e.currentTarget.name); //버튼
  const { currentTarget: { name }} = e; //const name = e.currentTarget.name;
  //2. 타입 단언(as) 사용
  const target = e.target as HTMLButtonElement;
  console.log(target.name); //버튼
}

export function App() {
  return (
      <button name='버튼'onClick={onClick} >sdf</button>
  );
}

TS는 e.target을 HTMLButtonElement가아닌 EventTarget타입(속성가지지않음)으로 여기기때문에 name속성 접근불가

-> currentTarget or 타입단언 사용