리액트 Event

condition ? true : false
참이면 첫번째를 반환 거짓이면 두번째를 반환​

<button onClick={activate}>
	Activate
</button>

리액트 Event 표기법

 

매개변수(파라미터)

어떤식으로 매게변수를 이벤트 핸들러에 전달하는지 분석해보자 

<button onClick = {(event) =>this.deleteItem(id, event)}>삭제하기</button>
<button onClick = {this.deleteItem.bind(this,id)}>삭제하기</button>

// 모두 동일한 역할을 하지만 하나는 arrow function, 하나는 bind를 사용함
// 리액트에서 이벤트라는 매게변수는 리액트에 이벤트 객체를 말함
// 첫번째 매게변수는 id, 두번째는 event전달
// 첫번째 함수는 event를 두번째 매게변수에 넣어준 반면, 
// 두번째는 이벤트가 자동으로 id이후에 두번째 매게 변수로 전달됨

---

Inline condition(조건문을 코드안에 집어 넣는 것)

 

Inline if 

if문을 직접 넣진 않고 && 연산자(양쪽 조건이 모두 true일때 됌)를 활용한다 

true && expression -> 첫번째 true를 먼저 평가하고 맞으면 두번째 조건문 expression를 평가 
false && experssion -> 첫번째가 false면 false(두번째 평가 x)
이들을 단축 평가라고 한다.

 

Inline If-Else 

if else를 필요한 구문에 직접 넣어서 사용한다(조건문에 값에 따라서 다른 엘리먼트를 보여줄 때 사용하고 삼항연산자를 사용한다.)

 

Component 렌더링 막기

null을 리턴하면 렌더링 되지 않음!

function WarningBanner(props){
	if(!props.warning){
    	return null;
   	}
    
    return (
    	<div>경고!</div>
    );
}

// props.warning의 값이 false일 때 null을 내뱉고 true이면 div를 뱉음

클래스 컴포넌트  render 함수에서 null을 리턴하는 것은 컴포넌트 생명주기 함수에  전혀 영향을 미치지 않음

예시로 componentDidupdate함수는 여전히 호출이 된다.