React Component 구성/JSX문법

<컴포넌트란?>

리액트의 핵심 빌딩 블록이다. 

컴포넌트를 통해 UI를 재사용이 가능한 개별적인 여러조각으로 나누고, 각조각을 개별적으로 살펴볼수 있습니다(독립적이다.). 개념적으로 컴포넌트는 JavaScript함수와 유사합니다. "prop"(input)라고 하는 임의의 입력을 받은 후, 화면에 어떻게 표시되는 지를 기술하는 React엘리먼트(output)를 반환합니다. 이렇듯 UI요소를 표현하는 최소한의 단위이며 화면의 특정부분이 어떻게 생길지 정하는 선언체입니다.

 

React Component	함수형 컴포넌트 <주로 사용>	// props(//input)라는 입력을 받음 // React 엘리먼츠(//output)를 반환(return) function Welcome(props) {   return <h1>Hello, {props.name}</h1>; } // 훨씬 쉬운 표현을 해보면 아래와 같죠. function App () { return <div>hello</div> }
	클래스 컴포넌트	class Welcome extends React.Component {   render() {     return <h1>Hello, {this.props.name}</h1>;   } }

기능적으로 같지만 함수형 컴포넌트를 선호합니다. 

결론적으로 React의 세계에서 말하는 컴포넌트는 '함수'다. 

=> html을 return하는 함수를 만들면된다. (실제로는html이 아닌jsx를 사용할 것이지만)

<컴포넌트 영역>

컴포넌트는 영역을 나눠서 생각하면 쉬운데 3가지로 나누면

 

import와 export를 하는 부분, import= 가져오기 export는 내보내기

javascript를 작성하는 부분, 함수가 시작되는 부분 바로 밑, return 전

html같이 생긴 것을 작성하는 부분(JSX문법), return 바로 밑

 

또한 컴포넌트의 이름은 항상 대문자로 시작해야한다. 약속!

import React from 'react';
function App() {
  
	// <---- 자바스크립트 영역 ---->
  let hey= ()=>alert('클릭입니다.')

  return (
  /* <---- HTML/JSX 영역  ---->*/
    <div
      style={{
        height: '100vh',
        display: ' flex',
        flexDirection: 'column',
        justifyContent: 'center',
        alignItems: 'center',
      }}
      /*중괄호가 2개가있는 이유는 {자바스크립트 안에{객체}}*/
    >
   {/* 이곳에 퀴즈를 위한 html 코드를 작성해 주세요 */}
      <span>이것은 내가 만든 App컴포넌트입니다</span>
      <button onClick={hey}>클릭</button> /*자바스크립트 문법{}에 넣기*/
    </div>
  );
}

export default App;

위 예제 에서 여러가지 약속을 볼 수 있다.

1. 자바스크립트 문법을 표현하려면 {}안에 넣기

2. 컴포넌트의 이름 대문자 시작

3. import export

 

<parent, child 컴포넌트>

//자식 컴포넌트
function Child(){
  return<div>나는 자식입니다.</div>
}
//부모컴포넌트
function App() {
return <Child/>;
}

부모컴포넌트 =(output의 값에) 다른 컴포넌트를 품고있다

자식컴포넌트 =  다른 컴포넌트( 반환값)에 품어지고 있다.

 

=> 같은 값이 반복된다거나 코드가 너무 길어질 경우 사용. 

<JSX문법>

JSX는 무엇인가

= JavaScript+ XML

= JavaScript의 모든 기능이 포함되어 있으며, React Element를 생성하기 위한 문법

 

React에선 딱 하나의 html파일만이 존재할 수 있는데 JSX문법을 사용해서 React요소를 만들고 Dom으로 렌더링 시켜서 그린다. 

 

 <JSX약속>

1.  당연하지만 / 닫는 태그 반드시 해주기
2.  return값에 최상위 태그는 꼭 하나만
3. JSX에서 JavaScript를 데려오려면{}에 넣기 //삼항연산자, map 다 사용가능
4. React에서 선택자를 선언할  땐 className ="이름"
5. style={자바스크립트 문법처럼 중괄호 안에{객체로 넣어주기}}
      =>객체를 변수로 선언해서 사용해도 됨