React DOCS Reading study(4)

 이벤트 처리하기

1. camelCase 형태의 이벤트

ex ) onClick

2. JSX를 사용하여 문자열이 아닌 함수로 이벤트 헨들러 전달

ex ) onClick={activateLasers}

3. return false를 통한 기본동작 방지X => e.preventDefault를 명시적으로 호출 필요

4. react에서 전달된 e는 합성 이벤트 => react는 W3C 명세에 따라 합성 이벤트를 정의, 브라우저 호환 걱정 X

5. onClick을 통해 전달된 이벤트에서 this는 바인딩X => 호출 시 onClick={this.handleClick} 형태로 호출해야한다.

6. 인자 전달하기

 6-1 onClick={(e) => this.deleteRow(id, e)}

 6-2 onClick={this.deleteRow.bind(this, id)}

 

( 합성 이벤트 : 합성 이벤트는 react 내에서 브라우저의 고유 이벤트를 참조하여 한번 렙핑한 이벤트라 생각하면된다. 즉 정확하게 합성 이벤트는 고유의 브라우저와 다르고 합성 이벤트가 확장버전이라 생각할 수 있다. 따라서 고유 이벤트에 접근하고 싶으면 nativeEvent 어트리뷰트를 참조해야한다.

차이 예 ) onMouseLeave에서 event.nativeEvent는 mouseout 이벤트를 가리킨다.

 

이외 여러 이벤트에 대한 정보는 링크로 남겨둔다.

https://ko.reactjs.org/docs/events.html

합성 이벤트(SyntheticEvent) – React

 

조건부 렌더링

조건에 따라 view를 관리하는 방법.

 

프레임워크 혹은 라이브러리에 따라 다른 방식을 채택하고 있는 렌더링 방식이다. 리액트와 앵귤러를 비교하며, 풀어보자.

 

조건에 따라 컴포넌트를 숨기기 혹은 나타내기

 

react

 

일반적으로 if, 논리 연산자 && , 삼항 연산자를 통해 표현한다.

여기서도 논리 연산자와 삼항 연산자가 가독성에 있어 더 좋기 때문에 이를 더 선호하여 사용된다.

 

주의점

해당 값에 대한 true, false를 잘 파악해야한다.

예를 들어, 0의 경우도 false로 나오기 때문에 실수를 할 수 있다.

 

예시 

const [isShow] = useState<boolean>(false);

function Main(): JSX.Element {
	return (
    	<>
    		{
        		isShow && <Modal>
        	}
        </>
    )
}

function Main(): JSX.Element {
	return (
      <>
          {
              isShow ? <Modal> : null;
          }
      </>
    )
}

 

또한 다른 컴포넌트에 의해 렌더링될 때 컴포넌트 자체를 숨기고 싶을 때가 있다.

이때는 렌더링 결과를 출력하는 대신 null을 반환하면 해결할 수 있다. null을 반환하는 것은 생명주기 메소드 호출에 영향을 주지 않는다.

 

다음은 앵귤러를 봐보자.

const isOpen = false;

<div *ngIf = "isOpen"> 
	Open
</div>

앵귤러에서는 앵귤러 내의 문법이 존재한다. html 파일에서 직접 if문을 작성할 수 있다. *ngIf를 통해 변수의 값에 따라 렌더링 되고 안되고를 컨트롤 할 수 있다. 단순 변수 뿐만 아니라 내부에서 삼항연산자, 논리 연산자 등을 사용할 수 있다.