React JSX 문법과 ESLint, Prettier 적용법

JSX 문법

---

1. 부모 요소 하나로 감싸기

• 컴포넌트에 여러 요소가 있다면 반드시 하나의 부모 요소로 감싸야 한다

function App() {
  return (
    <h1>부모요소가 없으면</h1>
    <h2>잘 작동하지 않아요</h2>
  )
}

export default App;

• 위와 같이 작성하면 아래와 같은 오류가 발생한다

 

 

• 아래와 같이 div 태그 혹은 <></> 태그(fragment tag)를 활용하여 감싸줘야 한다.

function App() {
  return (
    <div>
    <h1>부모요소는</h1>
    <h2>반드시 하나!</h2>
    </div>
  )
}

export default App;

 

• virtual Dom에서 컴포넌트 변화를 효율적으로 감지할 수 있도록 컴포넌트 내부는 하나의 DOM 트리 구조로 이루어져야한다는 규칙이 있기 때문이다.

---

 

2. 자바스크립트 표현식 사용하기

• const, let을 사용하여 선언한 변수를 {} 를 사용해 그려낼 수 있다

function App() {
  const name = '리액트'
  return (
    <>
    <h1>{name}</h1>
    <h2>안녕!</h2>
    </>
  )
}

export default App;

 

---

 

 

3. if 문 대신 조건부 연산자 사용하기

• JSX 내부의 자바스크립트 표현식에서는 if문을 사용할 수 없다
• if 문이 필요한 경우에는 JSX 밖에서 if문을 사용해 사전에 값을 설정하거나 {} 안에 조건부 연산자를 사용해야 한다
• 조건부 연산자 == 삼항 연산자

function App() {
  const name = '리액트'
  return (
    <>
      {name === '리액트'?(
        <h1>리액트입니다</h1>
      ): (
        <h2>리액트가 아닙니다</h2>
      )}
    </>
  )
}

export default App;

 

 

---

 

4. AND 연산자(&&)를 사용한 조건부 렌더링

• 특정 조건을 만족하지 않을 때 아무것도 렌더링되지 않도록 하려면 null을 사용하면 된다.

function App() {
  const name = '리엑트'
  return <div>{name === '리액트'? <h1>리액트입니다</h1> : null}</div>
}

 

 

• && 연산자를 사용하여 더 간단하게 조건부 렌더링을 할 수 있다

function App() {
  const name = '리액트'
  return <div>{name === '리액트' && <h1>리액트입니다</h1>}</div>
}

export default App;

 

• false인 값을 렌더링 할때는 null과 마찬가지로 아무것도 나타나지 않는다
• 다만, falsy한 값인 '0'은 예외적으로 화면에 나타날 수 있으므로 주의해야 한다
• 아래와 같은 경우 '참이면 보이는 값'이나 빈 화면이 아닌 0이 출력되는 것을 확인할 수 있다

function App() {
  const number = 0
  return number && <div>참이면 보이는 값</div>
}

export default App;

• 참고 : JSX를 여러줄로 작성할 때는 ()로 감싸고, 한 줄로 표현할 수 있을 땐 감싸지 않는다(필수X)

 

---

 

5. undefined를 렌더링하지 않기(현재는 오류 안남)

• undefined만 반환하여 렌더링할 경우 오류 발생 => React18 이후로는 null과 같이 빈화면을 반환한다(오류 안남)

function App() {
  const name = undefined
  return name
}

export default App;

 

• OR(||) 연산자를 사용하여 undefined일 때 사용할 값을 지정할 수 있다

function App() {
  const name = undefined
  return name || '값이 undefined 입니다'
}

export default App;

 

• JSX 내부에서 undefined를 렌더링 하는 것은 괜찮다

---

6. 인라인 스타일링

• DOM 요소에 스타일을 적용할 때에는 객체 형태로 넣어야 한다
• background-color 처럼 '-' 문자가 포함될 경우 카멜 표기법을 따른다 : backgroundColor
• 방법1

function App() {
  const name = '리액트'
  const style = {
    backgroundColor : 'black',
    color : 'aqua',
    fontSize : '48px',
    fontWeight : 'bold',
    padding : 16
  } // 단위 생략하면 px로 입력됨
  return <div style={style}>{name}</div>
}

export default App;

 

• 방법2

function App() {
  const name = '리액트'
  return <div style={{
    backgroundColor : 'black',
    color : 'aqua',
    fontSize : '48px',
    fontWeight : 'bold',
    padding : 16
  }}>{name}</div>
}

export default App;

 

 

• 결과

 

---

 

7. class 대신 className 사용

• class 선언과 혼동되지 않도록 className을 사용한다
• App.css

.react {
  background : aqua;
  color : black;
  font-size : 48px;
  font-weight : bold;
  padding : 16px;
}

 

• App.js

import './App.css';

function App() {
  const name = '리액트'
  return <div className="react">{name}</div>
}

export default App;

 

• 결과

 

---

 

8. 꼭 닫아야 하는 태그

• br, input와 같은 태그는 HTML 에서는 태그를 닫지 않아도 문제없이 작동했지만 JSX에서는 오류가 발생한다
• 아래와 같이 작성하면 오류 발생

function App() {
  const name = '리액트'
  return (
    <>
      <div className="react">{name}</div>
      <input>
    </>
  )
}

 

• <input></input>으로 닫을 수도 있지만, 선언과 동시에 닫을 수 있는 self-closing 태그를 사용할 수도 있다

function App() {
  const name = '리액트'
  return (
    <>
      <div className="react">{name}</div>
      <input />
    </>
  )
}

export default App;

 

 

---

 

 

9. 주석

• JSX 내부에서 주석을 작성할 때는 {/* 내용 */}와 같은 형식으로 작성한다(여러줄 작성도 가능)
• 시작 태그를 여러줄로 작성할 때에는 그 내부에서 `//`를 사용할 수 있다(한 줄일땐 오류남)

function App() {
  const name = '리액트'
  return (
    <>
      {/* JSX 주석 */}
      <div 
        className="react" // 시작 태그를 여러줄로 하면 이렇게 주석 쓸 수 있다
        >{name}
        </div>
        시작태그가 아닌 곳에 `//` 또는 `/* */`주석을 사용하면  페이지에 그대로 렌더링 된다
      <input />
    </>
  )
}

export default App;

 

 

---

 

ESLint와 Prettier 적용법

---

 

1. ESLint 

 

• 문법 검사 도구
• 코드를 작성할 때 실수하면 에러 혹은 경고 메시지를 VS Code 에디터에 바로 띄워준다
• [보기] > [문제]를 클릭하여 에디터 하단 창에서도 확인이 가능하다
•  

 

2. Prettier

• 코드 스타일 자동 정리 도구
• 코드의 가독성을 위해 들여쓰기, 세미콜론(;) 추가, 작은따옴표->큰따옴표 변경 등을 해줌
• VS Code에서 [F1]을 누르고 format 이라고 입력한 다음 엔터

 

• 저장할 때마다 자동 정리 설정
  • 우측상단[파일] > [기본설정] > [설정] > format on save 검색 > 체크박스 체크

 

 

 

 

참고자료 : 리액트를 다루는 기술 개정판