[개념정리 13탄] React 컴포넌트 / JSX

컴포넌트(Component)

간단히 설명하면 화면을 구성하는 하나의 단위(블럭)이라 할 수 있다.

 

예를 들어, 검색 컴포넌트, 로그인 컴포넌트, 상품리스트 컴포넌트, 추천 상품 컴포넌트 등 html 한 페이지를 각각의 컴포넌트로 나누어 작성할 수 있다.

 

컴포넌트를 사용함에 있어 장점은 계속 재사용이 가능한것, 유지보수가 비교적 쉬운 것, 협업하기 좋은것이 있다.

단점으론 프로젝트 크기가 커질수록 컴포넌트의 갯수가 많아지기 때문에 폴더구조가 복잡할 수 있다.

 

예시

function App(){
	return <div></div>
}

결국 html을 리턴하는 함수가 컴포넌트다.

 

컴포넌트 코드 보는 방법(CRA 직후 App.js 파일)

// 컴포넌트 밖, 필요한 파일 import
import logo from "./logo.svg";
import "./App.css";

function App() {
	// 자바스크립트를 쓸 수 있는 영역
    return (
    	// JSX를 쓸수 있는 영역
        <div className="App">
	    	<header className="App-header">
    	    	<img src={logo} className="App-logo" alt="logo" />
                <p>
                	Edit <code>src/App.js</code> and save to reload.
                </p>
                <a className="App-link" href="https://reactjs.org" target="_blank" rel="noopener noreferrer">
                	Learn React
                </a>
            </header>
        </div>
    );
}
// 컴포넌트를 다른데서 import할 수 있게 export
export default App;

주의할 점

• 컴포넌트의 첫글자는 항상 대문자
• 폴더는 소문자로 시작하는 카멜케이스 / 컴포넌트파일은 대문자로 시작하는 카멜케이스

이 2가지를 지켜줘야한다.(개발자끼리 암묵적 약속)

 

한번 만들어 보기

import React from "react";
function App() {
	// <---- 자바스크립트 영역---->
    const click = () => {
    	alert("클릭!");
    };
    return (
    	/* <---- HTML/JSX 영역 ----> */
    	<div
        	style={{
            	height: "100vh",
                display: "flex",
                flexDirection: "column",
                justifyContent: "center",
                alignItems: "center",
            }}    
        >
        	<div>이것은 내가 만든 App컴포넌트 입니다</div>
            <button onClick={click}>클릭!</button>
        </div>
    );
}
export default App;

기존에 html에서 사용하던 onclick과는 다르게 click()이 아닌 click만 넣어주고 위의 자바스크립트 작성 영역에는

const click = () => {} 이렇게 화살표함수로 사용해도 되고 function click() {} 방식으로 사용해줘도 된다. 스타일 같은 경우 저렇게 내부로 주는 방식도 있고, 파일을 따로 만들어서 import해도 된다. 위 코드에서 보면 JSX영역이라고 되어있는 곳에 html문이 있고 속성사용법이 약간 다르다는 것을 알 수 있다. 

이 부분은 JSX에서 알아보자.

 

그리고 부모/자식 컴포넌트의 개념을 간다하게 집고 가자면

import React from "react";

function Child() {
	return <div>나는 자식입니다.</div>;
}

funciton App() {
	return <Child />;
}

export default App;

이런 식으로 자식 컴포넌트를 부모 컴포넌트 안에 태그형태로 사용할 수 있다.

 

JSX

자바스크립트를 확장한 문법이다.

JSX에서는 html에서 사용하던 class 대신 className으로 사용하고, 무조건 1개의 element만 반환한다. JS문법이나 값을 가져오려면 중괄호를 사용해야 한다.

// 오류예시 (2개의 element 사용)
return(
	<p>안녕! 리액트 :)</p>
    <div className="App">
    	<input type = 'text'/>
    </div>
)

// 올바른 예시
return(
    <div className="App">
    	<p>안녕! 리액트 :)</p>
    	<input type = 'text'/>
    </div>
)

// JS 사용 예시
const number = 1;
return(
	<p>{number > 10 ? number + '은 10보다 크다' : number + '은 10보다 작다'}</p>
)

// 내부스타일 사용 예시
function App() {
	const styles = {
    	color: 'orange',
        fontSize: '20px'
    };
    
    return (
    	<div className="App">
        	<p style={styles}>orange</p>
        </div>
    );
}