React: JSX, props and state, event handling

22 Mar 2023 • TIL

JSX

JSX 소개 – React
Babel

babel이 html 문법으로 작성한 형태를 React createElement 형태로 변환시켜준다. 즉, 어렵게 작성하지 않고 html 형태로 작성해도 된다.

const element = (
  <div>
    <h1>Hello!</h1>
    <h2>Good to see you here.</h2>
		<h1 className="greeting">
    Hello, world!
	  </h1>
  </div>
);

  • JSX 사용 이유

    React.createElement 보다 가독성이 훨씬 좋다.
    babel과 같은 컴파일 과정에서 문법적 오류를 인지하기가 쉽다.

  • JSX 규칙

    최상위 요소가 하나여야 한다. (최상위 요소가 두개 존재하면 error)
    만약! 같은 최상위 요소를 두개 만들고 싶다면? Fragment를 사용한다.
    <></> 태그를 최상위 요소로 사용하는 것이다.

    중괄호{}를 사용하여 자바스크립트 표현식을 사용한다. (중괄호 안에 문자열, 변수 등)

    if문은 사용할 수 없다.
    삼항 연산자 혹은 &&를 사용한다.

    class 대신에 className을 사용해서 class를 적용한다.

    자식요소가 있다면 꼭 닫아야 하며, 자식요소가 없으면 열면서 닫아야 한다.

Props와 State

  • props

    컴포넌트 외부에서 컴포넌트에게 주는 데이터이다.

    class Component extends React.Component {
  render() {
    return (
    <div>{this.props.message}</div>
    )
  }
}
  
ReactDOM.render(
  <Component message="Hello" />
);

  • state

    컴포넌트 내부에서 변경할 수 있는 데이터이다.

    class Component extends React.Component {
  state = {
    count: 0
  }
  
  render() {
    return (
    <div>{this.state.count}</div>
    )
  }
}

두가지 모두 변경이 발생하면 render가 다시 일어날 수 있다. 즉, 컴포넌트는 다시 그림을 그리려고 한다.

  • render()

    props와 state를 바탕으로 컴포넌트를 그린다.
    props와 state가 변경되면 컴포넌트를 다시 그린다. 컴포넌트를 그리는 방법을 기술하는 함수가 랜더함수이다.

    • React는 Virtual DOM을 사용해서 성능을 개선했다. DOM을 직접 조작하지 않고, 가상 돔 트리를 사용하여 변경된 부분만 바꿔준다.
    • CSR은 모든 JS 파일을 다운로드 받기 전까지 화면에 아무것도 출력하지 않는다. SSR은 JS 파일을 다운로드 받지 않아도 화면에 보이지만, 유저가 사용하지 못하다가 JS 파일을 모두 다운로드 받으면 사용 가능해진다.
    • React 컴포넌트는 함수로 이루어져 있으며, 인자로 props가 들어오고, 함수 안에서는 반드시 return을 해주어야 한다. React 컴포넌트는 React Element를 return해야 한다.
    • React는 Virtual DOM을 사용해서 성능을 개선했다. DOM을 직접 조작하지 않고, 가상 돔 트리를 사용하여 변경된 부분만 바꿔준다.
    • CSR은 모든 JS 파일을 다운로드 받기 전까지 화면에 아무것도 출력하지 않는다. SSR은 JS 파일을 다운로드 받지 않아도 화면에 보이지만, 유저가 사용하지 못하다가 JS 파일을 모두 다운로드 받으면 사용 가능해진다.
    • React 컴포넌트는 함수로 이루어져 있으며, 인자로 props가 들어오고, 함수 안에서는 반드시 return을 해주어야 한다. React 컴포넌트는 React Element를 return해야 한다.

Event Handling

HTML DOM에 클릭하면 이벤트가 발생하고, 그에 맞는 변경이 일어나도록 한다.

Event Handling은 camelCase로만 사용할 수 있다. (onClick, onMouseEnter)
이벤트에 연결된 자바스크립트 코드는 함수이다. (이벤트={함수}와 같이 쓴다.)
실제 DOM 요소들에만 사용이 가능하다. (리액트 컴포넌트에 사용하면, 그냥 props로 전달된다.)

function Component() {
	return (
		<button
			onClick={() => {
				console.log("clicked")
			}}
		>
			click!
		</button>
	)
}
 TIL  React

Comments

Related Posts