리액트가 뭐에요?

후후니·2021년 7월 8일
0
post-thumbnail

과정 처음부터 두려워하던 리액트를 드디어 만났다..

하...

리액트가 뭐에요..?

정말 처음 리액트를 마주했을때의 당혹감이란..
한글을 읽고 있지만, 이게 무슨 말인가싶었다..

하지만 페어분과 문제를 풀며 진행해나가니 어느정도
아!! 이렇게 하는거구나.. 라는 생각이 들었다.

꼭 열심히 해서 리액트 마스터가 되는 그날이 왔으면 정말 좋겠다!!

모두들 화이팅!!

리액트에서 중요한 JSX에 대해 간단히 정리하고 가자..

JSX

React에서 UI를 구성할 떄 사용하는 문법으로 js를 확장한 문법.
이 문법을 이용해서 우리는 React 엘리먼트를 만들 수 있다.

JSX를 쓰지 않는 것과 쓰는 것의 차이는
코드에서 확연히 드러난다. 아주 간결해진다는 것.
JSX를 통해 미니멀한 코드를 짜볼 수 있도록 하자

JSX의 규칙

  • 하나의 컴포넌트를 만들 때, 하나의 엘리먼트 안에 모든 엘리먼트가 포함되어야한다.

  • 엘리먼트 클래스 사용 시, className으로 표기.

  • JavaScript 표현식 사용 시, 중괄호 사용.(변수 사용할 때)

  • 사용자 정의 컴포넌트는 대문자로 시작해야한다.
    - function Hello() / return <Hello />

  • 조건부 렌더링에는 삼항 연산자 사용

  • 여러 개의 HTML엘리먼트를 표시할 때, map()함수를 사용

profile
주니어 프론트엔드

0개의 댓글