[TIL] JSX / Props / 이벤트 속성

JSX

JSX는 JavaScript XML의 줄임말로서 XML 구문에 JS 코드를 결합하는 용도로 만들어진 구문이다.

 

JSX를 이용하면 JS와 HTML을 혼용하여 사용할 수 있기 때문에 함수가 HTML을 반환하는 수준을 넘어서 동적으로 특정 변수의 값을 HTML로 렌더링하도록 설정할 수 있다.

JSX 주의 사항

1. 중괄호 내부에는 JS 표현식만 넣을 수 있다.
2. 숫자, 문자열, 배열 값만 렌더링 된다.
3. 모든 태그는 닫혀있어야 한다.
4. 최상위 태그는 반드시 하나여야만 한다.

 

Props

리액트에서는 부모 컴포넌트가 자식 컴포넌트에 마치 함수의 인수를 전달하듯이 원하는 값을 전달해주는 게 가능하다. 이때 컴포넌트에 전달된 값들을 Props라고 부른다.

 

Props를 이용하면 전달하는 값에 따라서 각각 다른 UI를 렌더링하도록 만들 수 있다.

 

 

props는 객체여서 값을 넘겨받을 때 자식 컴포넌트에서는 'props.이름' 으로 접근할 수 있다.

 

이벤트 속성

이벤트란?

이벤트란 마우스 클릭, 텍스트 입력과 같은 웹 페이지 내부에서 발생하는 사용자의 행동이다.

이벤트 핸들링이란?

이벤트 핸들링이란 웹에서 이벤트가 발생했을 때 그것을 처리하는 것을 의미한다. 즉, 웹에서 발생하는 사용자들의 행동을 처리해 주는 것이다.

 

on이벤트명(카멜 케이스)으로 이벤트 리스너를 작성하고 콜백 함수로 이벤트 핸들러를 설정할 수 있다.

 

<button onClick={() => console.log('클릭')}>
  버튼
</button>