React 리액트 - 기본 함수, 컴포넌트의 연산

 

 

React 리액트 기본 함수

 

 

 

 

jsx를 App.js에서 사용하기 위해

기본 함수 const와 =>를 사용하고

문서를 내보내기 위해 하단에 export를 사용한다

 

 

 

 

function 함수를 사용하는 방법도 동일하며

하단에 export를 사용하지 않고 함수 앞에 export를 붙여 내보내기 가능

 

 

 

 

첫번째 방식의 경우 아래의 형태로 가져온다

import Jsx01 from './Jsx01';

파일명 변경 가능

 

두번째 방식의 경우 아래의 형태로 가져온다

import { Jsx02 } from './Jsx02';

파일명 변경 불가하며 반드시 {중괄호}를 사용해야 한다

 

 

* function과 const의 차이

기본적으로 function과 const의 차이는 없으며

둘 다 똑같이 컴포넌트로 잘 동작하며 성능 차이도 없다

 

const App = () => {
  return <div>...</div>;
};

 

단순히 표현 방식의 차이로

const+화살표 방식이 더 깔끔해서 최근 선호된다

 

 

컴포넌트의 연산

 

 

export function Jsx02(){
  return (
    <>
      <h1>
        컴포넌트의 연산
      </h1>
      <p>
        1+1={1+1}
      </p>
    </>
  )
}

 

 

js는 컴포넌트의 연산이 가능하며

{} 중괄호를 사용해 묶으면 연산이 된다

 

 

<결과화면>

 

 

리액트의 자바스크립트 영역

 

 

 

 

return 이전 영역이 react의 js 영역으로

리턴을 만나기 전에 본문영역에 변수 선언할 수 있다

 

export function Jsx02(){

  const name = "홍길동"
  
  return (
    <>
      <h1>
        {name}컴포넌트의 연산
      </h1>
      <p>
        1+1={1+1}
      </p>
    </>
  )
}

 

 

<결과화면>

 

 

 

https://developernew.tistory.com/431

리액트 React 설치방법 feat. VS Code

 

https://developernew.tistory.com/432

React 리액트 기본 개념 + 기초 용어 + 화면구성 및 설정