React JS ②

하겅 ·2024년 1월 25일
2024 방학 스터디React

React

목록 보기
3/6

React JS

오늘의 글 목차

① React 파일 실행 시 흐름 이해하기
② Component란?
③ Component에 css 적용하기 (css, props)
④ props의 구조 분해 할당
⑤ children 사용해 보기

① React JS 실행 흐름

  • React 환경 구성을 한 후 파일을 살펴보면, index.html이 index.js를 불러오고 있기 때문에 index.js가 동작한다고 볼 수 있고, index.js가 동작하고 있기 때문에 App 컴포넌트(App.js)가 렌더링 되고 있다는 걸 알 수 있음

Q. index.html은 어떻게 불러오는가?

A. npm start

  • npm start를 통해 서버를 구동시키는 순간 index.html 파일에 index.js 파일을 번들링 하는 파일이 삽입이 된다고 봐도 됨 (bundle.js) 

    * 번들링: 모듈들의 의존성 관계를 토대로 그룹화 함

  • bundle.js가 하는 그룹화

    • index.html ← index.js ← App.js

② Component란?

index.js가 렌더링시키는 파일이 App.js라 볼 수 있는데, 여기서 App.js를 Component라 할 수 있음

Component is…

  • 매우 독립적임
  • 재사용 가능
  • 특정 관심사에 집중된 기능 블록 → 각 블록을 부품으로써 만들어 조립할 수 있는 것
  • 독립적인 기능을 수행하는 단위 모듈 의미
  • React UI 컴포넌트 라이브러리

Q. 만약 Component를 사용하지 않고 작성한다면?

A. 시맨틱 태그(의미가 있는 태그)를 이용해 각 코드의 의미를 나타내게 될 것 (내부에 코드가 많아지는 경우 관리가 어려워짐)

종류

함수 컴포넌트 & 클래스 컴포넌트

함수 컴포넌트

  • 자바스크립트의 ‘함수(function)’ 기반 컴포넌트
  • 자바스크립트 함수를 선언하듯이 function으로 컴포넌트를 정의하고 return문에 JSX 코드를 반환
  • 또는 화살표 문법으로도 가능

▶ 기본 코드

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

▶ 화살표 함수 기본 코드

// 화살표
const MyComponent = () => {
	return(
		<div>
			Hello React
		</div>
	);
};

export default MyComponent; // 얘 없으면 오류

▶ 위 컴포넌트 사용(호출) 방법

import React from "react";

function App() {
  return (
    <div>
      <MyComponent /> {/* 컴포넌트 호출 */}
    </div>
  );
}

export default App;

▶ props 전달 방법 (프로퍼티 전달)

App.js → porps 전달 

import React from "react"; // 필수
import MyComponent from "./components/MyComponent"; // 사용할 컴포넌트 import 필수 

function App() {
  return (
    <div>
      <MyComponent one="프로퍼티 전달 방법" two="공부 중 :-3"/>
    </div>
  );
}

export default App;

MyComponent.js → props 받음 (화살표 함수 활용)

import React from "react"; // 필수
const MyComponent = (props) => {
    return(
        <p>props1: {props.one} props2: {props.two}</p>
    )
};

export default MyComponent; //필수

▶ 장점

  1. Hooks의 UseState를 사용한 state 관리 가능
  2. 직관적인 코드 → 위 코드 예시와 같이 자바스크립트 함수 선언 및 화살표 함수를 그대로 사용 가능 (개발자에게 직관적)
  3. 메모리 자원을 효율적으로 사용 가능 → 클래스형 컴포넌트에 비해 함수형 컴포넌트가 비교적 메모리 자원을 적게 사용함

클래스 컴포넌트

  • class 키워드로 class component 생성을 함
  • React.Component를 상속 받음
  • render() 메서드가 필수로 필요함 (메서드 내에 JSX 코드 리턴함)
  • this 키워드 사용 
// 생성 
inport React, {Component} from 'react';
class MyComponent extends Component{
	render(){
		return(
			<div>
				Hello React
			</div>
		)
	}
}

컴포넌트를 만들 때 검토해야 할 사항

  1. 다른 재료(다른 기능)를 추가할 수 있는가?
    → ex. 게시물 포스트를 컴포넌트로 설계 했다면 그 내용은 다 다르도록 구성할 수 있는지
  2. 그 값을 검증할 수 있는 기능인가?
    → ex. 제목인지 게시물인지 구분을 할 수 있는지

Component 스타일 변경

1. css 사용

App.css

  • App.js의 스타일 적용

how?

  1. App.css 파일이 import 되어 있어야 함 
import './App.css'
  1. className 지정 (HTML의 class=""와 같음)
function App() {
  return (
    <div className="App"> // 전체에 css 적용 
      <MyComponent one="프로퍼티 전달 방법" two="공부 중 :-3"/>
      <MyComponent one="여러 개도 가능" two="이게 컴포넌트 재사용 :-3"/>
      <CssStudy />
    </div>
  );
}
  1. App.css에서 스타일 지정 
.App{
    text-align: center;
}

2. props 사용

  • 박스를 하나 만들어서 테스트 해 볼 것

기본 틀

// App.css : 여기서 변경도 가능하지만 props를 활용할 것
.box{
    border: 1px solid;
    width: 100px;
    height: 100px;
    color: white; // 색상 배경에 하얀 글씨로 설정
    font-weight: 800; // 잘 보이도록 폰트 두께 설정 
}
//박스가 있는 컴포넌트 파일
return(
        <>
            <div className="box">{props.name}</div>
        </>
    )
//App.js 
<CssStudy 여기서전송="값을"/>
// 위 글씨에 맞게 색상을 전달 받아 변경하도록

props에 지정하고 싶은 값 전달

App.js

<CssStudy name="Blue Box" color="blue"/>

→ CssStudy라는 (박스가 있는) Component에 name에는 Blue Box 값을, color에는 blue라는 색상을 보내고 있는 것

props로 값을 받음

CssStudy.js

const CssStudy = (props) => {
    return(
        <>
            <div className="box" style={{backgroundColor: props.color}}>{props.name}</div>
        </>
    )
}

→ props로 넘어온 name 값을 중괄호로 감싸 값을 출력하고 있음
→ 색상은 태그 내에 style 속성 중 backgroundColor에 전달 중 (중요: style의 값은 중괄호로 두 번 감싸줘야 함)

여러 개 사용

<CssStudy name="Blue Box" color="blue"/>
<CssStudy name="Pink Box" color="pink"/>
<CssStudy name="Yellow Box" color="yellow"/>

Q. props를 전달하지 않는다면?

  • A. error는 나지 않지만, css 파일의 값만 적용되어 있는 채로 전달 값에 대한 적용은 안 된 채로 나타나 있을 것

  • 이런 경우 props의 default 값을 지정해 줄 수도 있음

App.js에서 props를 전달 중인 컴포넌트 하나, 전달 안 하는 컴포넌트 하나를 둠
<CssStudy name="Blue Box" color="blue"/> //전달 O
<CssStudy /> //전달 X
박스가 있는 CssStudy.js 내용
const CssStudy = (props) => {
    return(
        <>
            <div className="box" style={{backgroundColor: props.color}}>{props.name}</div>
        </>
    )
}

//default 값 설정 
CssStudy.defaultProps = {
    color: 'black',
    name: 'Default Box'
}

props의 구조 분해 할당

  • App.js에서 매개 변수를 전달 받아 객체로 받음
  • 쉽게 말해 지금까지는 props.name, props.color처럼 사용했지만, 구조 분해 할당을 해 color, name으로 받고 color, name 그 자체로 사용하고자 하는 것! 
// 중괄호로 감싸야 함 (안 그럼 에러)
const CssStudy = ({name, color}) => {
    return(
        <>
            <div className="box" style={{backgroundColor: color}}>{name}</div>
        </>
    )
}

{children} 사용하기

props.children

  • 컴포넌트 간 합성이 가능
  • 하위 컴포넌트나 HTML li 태그와 같은 엘리먼트가 얼마나 있는지 모르는 상황에서 화면에 표시해야 할 때 유용함

Wrapbox.js

import '../App.css';
import React from 'react';

const Wrapbox = ({children}) => {
    return(
        <>
            {children}
        </>
    )
}

export default Wrapbox;

App.js

<Wrapbox> 
   <CssStudy name="Blue Box" color="blue"/>
   <CssStudy />
</Wrapbox>

profile
하겅
건강합시다
이전 포스트

React JS ①

다음 포스트

React JS ③

0개의 댓글