[React] Component & JSX

오리·2024년 4월 13일

React 새싹

리액트의 꽃이라고 불리는 컴포넌트다!
중요한 개념이니 하나하나 잘 새기자

1. Component (컴포넌트)란?

화면을 구성하는 하나의 부분
내부에서 데이터만 변경하여 전체적인 틀 (UI) 사용가능하다.

2. 컴포넌트 종류

-> 리액트에서 컴포넌트 생성해주는 익스텐션(확장자) : ES7

1) 클래스형 컴포넌트

render() 함수를 반드시 사용해야 한다.
기존의 Component 클래스에서 상속받아서 사용한다.

import {Component} from "react";

class ClassComponent extends Component { 
	render() {
    	return (
        <>
        	<h1>클래스형 컴포넌트 실습</h1>
            <div>구조 파악하기!</div>
        </>
        );
    }
}

export default ClassComponent;

익스텐션 사용시 , rcc 입력하면 자동으로 구조 생성된다.

2) 함수형 컴포넌트

짧고 간결하며 직관적인 장점이 있다.
메모리 사용을 효율적으로 한다.
과거에는 클래스형 컴포넌트를 자주 사용했지만, 오늘날에는 사용이 쉬운 함수형 컴포넌트를 더 많이 사용한다.
공통적으로 컴포넌트의 이름은 PascalCase를 사용한다.

function default FuntionComponent() {
	return (
    <>
    	<h1>함수형 컴포넌트 실습</h1>
        <div>구조를 파악하자!</div>
    </>
    	
    );
}

3. JSX

자바스크립트 확장 문법으로, xml과 유사
바벨을 이용해 일반 자바스크립트 코드로 변환

1) 최상위 부모요소는 하나만 존재

html 코드는 반드시 return 이후에 작성한다.
반드시 하나의 부모요소가 전체요소를 감싸는 형태로 작성하고 최상위 부모요소는 하나만 존재하도록 작성한다.
딱 하나만 태그할 때는 return문 다음에 ()가 필요 없다.
div, section, article, header, footer 등 최상위 부모요소는 어떤 요소이든 상관 없다.
불필요한 태그를 만들지 않기 위해 <></>와 같은 태그로 감싸는 경우도 많다.

2) JS문법 사용하기

html을 작성하다가 중간에 js문법 사용하고 싶으면 중괄호 {} 사용한다.
JSX 내부에서 삼항연산자 대신 if,for문 작성 불가능하다.
-> 사용하려면 return문 위에서 사용해야 한다.

방법 1. 삼항연산자 (간단ver)

export default function FunComponent() {
const name = layla;
return (
	<>
    	<h2>{name === "layla" ? `어서오세요. {name}님` : "누구세요?"}</h2>
    </>

);
}

방법 2. 삼항연산자 (복잡ver)

export default function FunComponent() {
const checkUser = () => {
	if (name === "layla") {
    	return "어서오세요.";
    } else if (name === "lily") {
    	return "오랜만이시네요~";
    } else {
    	return "나가주세요!";
    }
}
return (
	<>
    	<h2>{checkUser()}</h2>
    </>
 );
}

방법 3. 조건부렌더링 (&&연산자) 사용

&& 논리연산자는 모두 true면 값이 출력되거나 true를 반환하고, false이면 무시되어 렌더링 되지 않는다.

export default function FunComponent {
	const show = true;
    return (
    <>
    	<h2>{show && "모달창 넣어주기!"}</h2>
    </>
  );
}

3) 인라인 style

css를 인라인형태로 적용하기 위해서는 {object}형태로 저장한다.
반드시 "" 안에 해당 값을 넣어준다.

방법 1. 직접 사용

export default function test() {
	return 
    <div style={{fontSize : "32", backgroundColor: "blue" }}>
    인라인 스타일
    </div> 
}
// js코드이므로 {} 쓰고, css 스타일이므로 또 {}써서 총 {{}}의 형태가 된다.

방법 2. 변수에 담아서 사용

export default function test2 {
	const divStyle = {fontSize : "32px", backgroundColor : "blue"}
    return 
    <div style={divStyle}>
    인라인 스타일2
    </div>
}

4) class와 onclick

class대신 className, onclick대신 onClick 사용한다.

return (
	<div className="test3" onClick={ ()=>{alret("hi");} }>
		
	</div>
);

5) opening tag

opening tag(빈태그)도 닫는태그 필요하다.

6) 이미지 넣기

프로젝트시, 이미지 파일의 경로는 src -> assets 파일을 생성하여 거기에 넣는다.
src 내부의 이미지를 사용할 경우 해당 이미지 import해 사용한다.

import cat from "../assets/cat_720.jpg";
export default function FunComponent() {
	return (
    	<>
        	<img src={cat} alt="고양이 사진" />
        </>
    );
}