리액트 컴포넌트,JSX

vite를 이용해 생성한 리액트 앱에서는 오류가 발생했을 때, 화면에 오류의 원인 또는 발생한 것으로 짐작되는 곳을 자동으로 짚어준다.

 

어떤 함수가 HTML 태그들을 return하고 있다면 리액트에서는 ‘컴포넌트’라고 부른다. 자바스크립트 함수를 만들고 해당 함수가 HTML 태그를 return 하게 만들어주면 그 함수는 리액트의 ‘컴포넌트’가 되는 것이다.

 

이렇게 함수로 만드는 컴포넌트들을 ‘함수 컴포넌트’ 라고 한다. 클래스를 이용해 컴포넌트를 만드는 ‘클래스 컴포넌트’도 있으나, 함수 컴포넌트에 비해 작성해야 되는 코드의 양이 훨씬 많다. 그래서 빠르고 간결하게 만들 수 있는 함수 컴포넌트를 사용한다.

 

 

 

 

어떤 컴포넌트를 다른 컴포넌트의 자식 컴포넌트로 배치할 때 HTML 태그를 쓰듯, 컴포넌트의 이름을 써주면 된다

ex) <Example />

 

함수로 만든 컴포넌트는 렌더링 되기 위해서, App 컴포넌트의 자식 컴포넌트로 배치되어야한다. 이유는 main.jsx에서 render 메서드를 호출해서 실제로 화면에 렌더링 하고 있는 컴포넌트는 App 컴포넌트 밖에 없기 때문이다.

 

 

- 리액트의 모든 컴포넌트는 다른 컴포넌트의 자식 컴포넌트로 배치될 수 있다. 즉 리액트에서는 모든 컴포넌트들이 부모와 자식 순으로 계층 구조를 이루면서 UI를 구현한다.

 

- 컴포넌트의 역할을 할 함수의 이름의 첫 글자는 꼭 대문자로 작성해야한다. 만약 컴포넌트의 이름을 header로 작성한다면, HTML의 header 태그인지, 컴포넌트 이름인 header인지 구별을 할 수가 없기 때문.

 

- 하나의 컴포넌트는 하나의 파일에 독립적으로 분리해서 쓴다.

 

- 컴포넌트 만든 뒤 export로 내보내고, 사용할 때는 import로 불러와서 쓴다.

 

 

 

 

 

[JSX]

순수 자바스크립트에서는 HTML 태그를 return 할 수 없다. 컴포넌트는 자바스크립트 함수이다. 그런데도 html 태그들을 return 하고 있다. 

 

리액트에서는 아무 문제 없이 HTML 태그를 return 할 수 있는 이유는 바로 리액트에서는 순수 JS가 아니라 JS의 확장 문법인 JSX을 사용하기 때문이다.

 

 

JSX는 단순히 HTML 태그들을 return 하는 것을 넘어서 변수의 값을 출력하는 것 또한 가능하다.

export default function Example(){

  const number = 10;

  return(
    <div>
      <h1>{number}</h1>
    </div>
  )
}

JSX 문법 안에서는 HTML 태그 내부에 중괄호({})와 함께 자바스크립트 변수도 사용할 수 있다.

 

 

 

export default function Example(){

  const number = 10;
  
  return(
    <div>
      <h1>{number % 2 === 0 ? "짝수" : "홀수"}</h1>
    </div>
  )
}

 

삼항연산자과 같은 논리적 표현식도 사용가능하다. 계산식, 문자열 등도 당연히 렌더링 가능하다

 

  

주의점

JSX는 문자값 or 숫자 값만 렌더링 할 수 있다. 즉 boolean, 객체 등은 렌더링 할 수 없다.(객체의 프로퍼티의 값은 당연히 가능하다)

 

 

값을 바로 꺼내올 수 있는 변수들이나 라인 한 번에 결과값을 도출할 수 있는 것들을 표현식이라고 한다. JSX의  중괄호 안에는 자바스크립트 표현식만 사용할 수 있다. if,for, 함수 정의 등은 할 수 없다는 뜻이다.(라인이 여러 개라 안된다고 이해하자)

 

 

 

 

 

[JSX 문법 사용시 지켜야 할 규칙들]

 

1. 모든 태그는 무조건 닫는 태그가 있어야 한다. 

2. return하는 모든 태그들은 항상 하나의 최상위 태그(루트 태그)로 묶어줘야 한다.묶고 싶지 않을 때는 최상위 태그에 빈태그(<></>) 를 써준다

 

 

 

 

 

[조건부 렌더링]

 

export default function Example(){

  const number = 10;
  
  return(
    <>
      <h2>{number % 2 === 0 ? (
        <div>{number}는 짝수입니다.</div>
        ) : (
        <div>{number}는 홀수입니다.</div> 
        )}
      </h2>
    </>
  )
}

 

JSX문법에서는 위처럼 삼항연산자를 이용해서 조건에 따라 다른 요소를 화면에 렌더링 할 수 있다.

 

export default function Example(){

  const user = {
    name : "이용진",
    isLogin : true
  }

  return(
    <>
      {user.isLogin ? (
      <div>마이페이지, 로그인</div>
      ) : (
      <div>로그인</div>
      )}
    </>
  )
}

실무에서는 조건부 렌더링을 통해 위처럼, 로그인 상태에 따라 다른 요소를 렌더링 할 수 있게 활용할 수 있다.

 

 

 

 

 

[JSX에서 표현하는 HTML 요소들에 스타일링 적용]

 

export default function Example(){

  return(
    <div 
      style={{
        backgroundColor : "green”,
	borderBottom : “5px solid blue”,
      }}
    >
      <h1>Example</h1>
    </div>
  )
}

 

일반 css에서는 background-color; 로 속성을 적용했지만 리액트, JSX 문법 안에서 HTML 스타일을 바로 적용할 때는 backgroundColor처럼 ‘파스칼 케이스’로 정의해줘야 한다.

 

파스칼 케이스 : 연속되는 단어가 있으면 두 번째 단어의 첫 번째 글자를 대문자로 쓰는 것

 

 

 

위처럼 스타일을 적용하면 요소가 많아지면 많아질수록 return문 내부가 너무 복잡해진다. 그래서 가독성이 점점 안 좋아진다.그래서 별도의 CSS 파일을 만들어서 스타일링을 적용하는 방법을 많이 사용한다.

 

별도의 CSS 파일을 만든다면, 그냥 CSS파일을 import 해서 사용하면 된다.

 

단 주의점은 HTML에서 요소의 class명을 지정할 때 class라고만 썼지만 JSX에서는 className라고 써야 한다.JSX문법은 html와 JS를 함께 쓰는 문법이기에 class라는 키워드가 JS의 class라는 키워드로 예약되어 있다. 그래서 class가 아니라 className으로 사용해야 하는 것이다.