[React]01.기본문법과 리액트컴포넌트

이정수·2022년 6월 29일

React란

React는 사용자 인터페이스를 구축하기 위한 선언적이고 효율적이며 유연한 JavaScript라이브러리이다.
Component라고 불리는 작고 고립된 파편을 이용하여 복잡한 UI를 구성하도록 돕는다.

React Component

-리액트로 만들어진 앱을 이루는 최소한의 단위이다
-Component의 이름은 항상 대문자로 시작한다.(소문자로 시작하는 컴포넌트는 리액트에서 DOM태그로 취급한다)
-props를 input하고 UI가 어떻게 보여야 하는지 정의하는 React Element를 output하는 함수이다.

함수형 컴포넌트

가장 간단하게 컴포넌트를 정의하는 방법으로 자바스크립트 함수를 작성하는 것이다.

function App () {
  const name = "react";
  return (
    <div> {name} </div>
    );
}

클래스형 컴포넌트

함수에서 클래스로의 변환
1.React.Component를 확장하는 동일한 이름의 ES6 class 생성
2.render()라고 불리는 빈 메서드를 추가
3.함수의 내용을 render() 메서드 안으로 옮김
4.render() 내용 안에있는 props를 this.props로 변경
5.남아있는 빈 함수선언을 삭제


class App extends React.Component {
	render() {
    	const name= "react";
        return (
    		<div> {name} </div>
   		 );
    }
}

함수형 컴포넌트와 클래스형 컴포넌트의 역할은 동일하다.
차이점은 클래스형 컴포넌트의 경우 state, life cycle기능을 사용할 수 있고, 임의 메서드를 정의할 수 있다. 반면 함수형 컴포넌트는 클래스형 컴포넌트보다 선언이 좀더 편하고 메모리자원을 덜 사용한다는 장점이 있다.
앞선 state, life cycle api를 사용할수 없다는 단점은 리액트 훅의 도입으로 해결되었다.

JSX(JavaScript XML)

JSX는 리액트로 프로젝트를 개발할 때 사용됨으로 공식적인 자바스크립트 문법은 아니다.
브라우저에서 실행하기 전에 babel을 사용하여 일반 javascript형태의 코드로 변환된다.
JSX는 하나의 파일에서 javascipt와 html을 동시에 사용하여 작성하여 편리하다.
JSX안에서 Javscript표현식을 작성하려면 JSX내부에서 코드를 {}로 감싸주면 된다.
JSX에서는 class가 아닌 className을 사용한다.

cf) Babel is a JavaScript compiler
바벨은 javascript로 결과물을 만들어 주는 컴파일러이다.

+더알아보기 ) polyfill

그외 알아두어야 할 기본문법

-최상위 태그는 반드시 하나여야 한다. 즉, 두개이상의 태그는 항상 하나의 태그에 담겨 있어야 한다.

const App =(
        <div>
          <Title> How to study React <Title />
          <Form />
          <MainCard img="./imgAdress"/>
          <Favorites />
        </div>
      );

위의 예시처럼 여러개의 태그들이 하나의 부모태그(div)안에 감싸져야 한다.

-Javascript 변수값은 중괄호 {}안에 넣어야 한다.

const MainCard=({img})=>{
        
        return (
          <div className="main-card">
          <img
            src={img}
            alt="고양이"
            width="400"
          />
        </div>
        );
      }

참고로 아래코드와 위코드는 서로 같다.

const MainCard=(props)=>{
        
        return (
          <div className="main-card">
          <img
            src={props.img}
            alt="고양이"
            width="400"
          />
        </div>
        );
      }