[React] Component / JSX

Component

---

: React에서 UI를 구성하는 기본 단위 (재사용가능)

🎈컴포넌트의 이름은 항상 대문자로 시작하기

1. 함수형 컴포넌트

function MyComponent() {
  return <div>Hello!</div>;
}

* 화살표 함수 컴포넌트

const MyComponent = () => <div>Hello!</div>;

- 한줄로 작성시 {return} 생략가능

- {}중갈호 같이 적는다면 return 필수

const MyComponent = () =>{
    return (
        <div>
        	<h1>Hello!</h1>
        </div>
    );
};

 

2. 클래스형 컴포넌트

: React의 이전 버전 방식

기존 프로젝트나 레거시 코드에서는 여전히 클래스형 컴포넌트를 사용하고 있을 수 있기때문에 알아두면 좋음.

class MyComponent extends React.Component {
  render() {
    return <div>Hello!</div>;
  }
}

 

 

JSX(JavaScript XML)

---

: JavaScript와 XML의 조합으로, React에서 HTML처럼 보이는 구문을 JavaScript 코드 안에서 사용할 수 있게 해주는 문법

 

JSX는 브라우저가 직접 이해하지 못하기 때문에, **컴파일러(예: Babel)**를 통해 순수 JavaScript 코드로 변환

이를 통해 React 컴포넌트 안에서 쉽게 UI 구조를 정의 가능

const element = <h1>Hello, World!</h1>;

*반환하는 모든 태그는 반드시 최상위 태그로 감싸져야함

 

JSX에서 JavaScript 표현식

---

: HTML 태그에서 자바스크립트의 표현식을 직접 사용 가능 {}

-표현식? 값으로 평가될수있는 코드,식 ( 변수, 연산, 삼항 연산자, 함수 호출 등 )

ex) 1+2 식은 3으로 평가되니 표현식

 

*${} 템플릿 리터럴

문자열안 동적 생성, 표현식 삽입 때 사용

const name = "블프";
const a = 5;
const b = 10;
const user = { name: "야옹", age: 25 };
const message = `안녕하세요, 저는 ${name}입니다. //동적
반가워용. //멀티라인 문자열 \n필요없음
${a + b} //표현식
Hello, ${user.name}`; //중첩표현식

 

1. 산술표현식

function MyComponent(){
    const num1 = 1;
    const num2 = 2;

    return (
        <div>{num1 + num2}</div>
    );
};

export default MyComponent;

2. 문자열 표현식

function MyComponent(){
    const a = "리";
    const b = "액트";

    return  <div>{a + b}</div>
};

export default MyComponent;

3. 논리 표현식

function MyComponent(){
    const a = true;

    return  <div>{String(a)}</div>
};

export default MyComponent;

-객체

function Body() {
    const obj = {
      name: "abc",
      age: 12,
    };
    return (
        <div>
            {/* <p>{obj}</p>  에러!*/}
            <p>{obj.name}</p>
            <p>{obj.age}</p>
        </div>
    );
}
export default Body;

-삼항연산자

function MyComponent(){
    const a = true;
    
    return  (
        <div>
            <h1>{a === true? "진실":"거짓"}</h1>
        </div>
    )
};

export default MyComponent;

-조건문

function MyComponent(){
    const a = 11;
    
    if(a > 10){
        return <div>{a}는 10보다 큼</div>
    } else {
        return <div>{a}는 10 이하</div>
    }
};

export default MyComponent;

 

스타일링

---

1. 전체 적용

-"styles.css" 생성

button{
    background-color: aqua;
}

 

-.js

상단추가

import "./styles.css";

const MyComponent = () =>{
    return (
        <div>
            <h1>Hello!</h1>
            <button>버튼1</button>
            <button>버튼2</button>
        </div>
    );
};

모든 버튼에 동일 스타일 적용

2. 인라인

style={{스타일 규칙들}}, 카멜 표기법

*첫 중괄호: js표현식, 두번째 중괄호: js 객체 (style 속성 js객체로 받음)

const MyComponent = () =>{
    return (
        <div style={{background: "skyblue"}}>
        	<h1>Hello!</h1>
        </div>
    );
};

각각 개별 적용 이런게 많이긴다면 코드 길어짐 → CSS Module 사용

3. CSS Module ✅

- "Button.module.css"생성

/* 클래스 */
.btn1 {
    background: skyblue;
}
.btn2 {
    background: lightpink;
}

-MyComponent.js

import styled from "./Button.module.css";

const MyComponent = () =>{
    return (
        <div>
            <h1>Hello!</h1>
            <button className={styled.btn1}>버튼1</button>
            <button className={styled.btn2}>버튼2</button>
        </div>
    );
};

export default MyComponent;

 

cra가 임의 클래스 이름 만들어냄

 

4. styled component ✅

자세히 : https://bbbpp.tistory.com/173

const Wrapper = styled.div`
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 200px;
  padding: 100px 0px;
  a { //Wrapper 컴포넌트 내부에 있는 모든 <a> 태그에 적용
    color: #1d9bf0;
    }
`;
const Title = styled.h1`
  font-size: 30px;
`;

function App() {
    return (
        <Wrapper>
        	<Title>HI!</Title>
        </Wrapper>
    )
}

 

*createGlobalStyle

:전역 스타일(Global Styles)을 설정할 때 사용되는 기능

전체 애플리케이션에 적용될 공통적인 스타일 규칙을 정의( 루트 컴포넌트(예: <App />) 내에서 사용 )

import { createGlobalStyle } from 'styled-components';
//import reset from 'styled-reset';

const GlobalStyles = createGlobalStyle`
  //${reset};  /* 브라우저 기본 스타일 초기화 */
  * {
    box-sizing: border-box;
  }
  body {
    background-color: black;
    color:white;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Arial', sans-serif;
  }
`;
  
function App() {
  return (
    <>
      <GlobalStyle />
      {/* 나머지 컴포넌트 */}
    </>
  );
}

export default App;

참고: https://github.com/zacanger/styled-reset/blob/master/src/index.ts

 

 

5. 컴포넌트 내 변수 선언

const App = () => {
    const style = {
        color: 'blue',
        fontSize: '20px',
    };
    
    return (
        <div style={style}>Hello World</div>
    );
}

 

*VSCode에서 styled-components와 같은 CSS-in-JS 라이브러리를 사용할 때 자동완성

TypeScript and Styled Components 플러그인을 설치

https://marketplace.visualstudio.com/items?itemName=styled-components.vscode-styled-components