[react] DeepDive 5 리액트 state

조건부 컨텐츠

 

삼항연산자

{조건식 ? 참 : 거짓}

=> 조건식이 참일 때 참을 반환, 거짓일 때 거짓을 반환

{조건식 && 참}

=> 조건식이 참일 경우에만 반환

 {item>0 ? <p>item</p> : <p>not item</p>}
 {item && <p>item</p>}

 

복습!!

 

데이터 양방향 통신 이해하기!!

 

첫번째 할일 !! 부모 컴포에서

     <ExpenseForm
          onSaveExpenseData={saveExpenseDataHandler}
          onCancel={onCancelHandler}
        />

통신 받을 함수 

함수포인터로 정의를 해줌

onCancel={onCancelHandler}

 

두번째!!

자식 컴포에서

const ExpensesForm = (props) => {

retrun

<button type="button" onClick={props.onCancel}>cancel</button>

}

props로 부모에서 전달해준 onCancel이라는 속성을 반환함

 

부모컴포에서 onClick을 받아 

 const onCancelHandler = () => {
    setIsEdit(false);
  };

setIsEdit(false)를 리턴해준다~!

 

props를 단방향으로 부모에서 자식으로만 내려주다가

위로 상향식으로 데이터를 통신하니 많이 헷갈리는 것 같다. 

반복이 답이겠지!

프로퍼티명이나 함수네이밍도 잘 해야겠다는 생각이 들었다