[KISA] 핀테크 아카데미 서비스 개발과정 (간편결제) #2회차 React Component / Props / State / Event

이 글은 핀테크 아카데미에서 유관우 대표님의 "핀테크 서비스 개발 기초 과정 2회차 강의" 을 수강 후 개인적으로 공부한 내용을 정리한 게시글입니다. 잘못된 점이나 부족한 부분이 있다면 언제든 지적 부탁드립니다.

 

#JSX

javascript class

🐶🐶중요 # React Component 와 Props

* 참고 https://ko.reactjs.org/docs/components-and-props.html

Components와 Props – React

컴포넌트 : 페이지를 구성하는 구성요소의 묶음 --> 라이브러리처럼 사용

* 선언할 때 대문자로!

프롭스 : 통로 -- 프로퍼티를 통해 컴포넌트에 데이터를 전달

* APP.js

// 컴포넌트 --> 반복적으로 사용하거나, 별도로 묶어놓으면 유용하게 쓰일 것 같을 때 사용
const Welcome = (props) => { 
  console.log(props) // 데이터가 어떻게 전달되는지 확인용
  return (<div>~~ 안녕하세요 {props.age}세 {props.username}님! 반갑습니다 ~~</div>)
}

// root 컴포넌트
function App() {
  return (
  <div>
    <Welcome username="허영은" age="20"></Welcome>
    <Welcome username="이순신" age="129381470750"></Welcome>
    {/* 내용을 품을 때 */}

    <Welcome username="허지렁이" age="12"/>
    {/* 이런 방식도 가능 --> 직관적 / 단일 컴포넌트 */}

  </div>
  );
}

export default App;

 

❓ 컴포넌트를 분리해서 보관하고 싶당!\

1) 컴포넌트 저장할 폴더 생성

src/components

2) 컴포넌트 폴더 아래 js 파일 생성

src/components/Welcome.js

3) App.js에서 컴포넌트 import 해주기

 

# React State

* 참고 https://ko.reactjs.org/docs/faq-state.html

function App() {
  let username ="미입력";

  const handleInputChange = (e) => {
    username = e.target.value;
    console.log(username);
  } 
  return (
  <div>
    이름 : <input onChange={handleInputChange}></input>
    {/* onChange : input에 Change가 발생하면 실행 */}
    <h1>username</h1>
  </div>
  );
}

export default App;

username 변경 X --> State로 데이터를 표시해야함

 

setState() : 컴포넌트의 state 객체에 대한 업데이트를 실행

-> state가 변경되면, 컴포넌트는 리렌더링된다!

*랜더링 : 화면을 그려주다 

import {useState} from "react"; // state hook을 import

function App() {
  let [usernameWithState, setUsernameWithState] = useState("초기값");
  // [데이터를 사용할 변수명, 데이터를 바꿀 수 있는 메소드]

  const handleInputChange = (e) => {
    setUsernameWithState(e.target.value);
    console.log(usernameWithState);
  } 
  return (
  <div>
    이름 : <input onChange={handleInputChange}></input>
    <h1>{usernameWithState}</h1>
  </div>
  );
}

export default App;

 

# state와 props의 차이점

둘다 모두 일반 JavaScript 객체이다.
두 객체 모두 렌더링 결과물에 영향을 주는 정보를 갖고 있는데, 한 가지 중요한 방식에서 차이가 있습니다. 

props : (함수 매개변수처럼) 컴포넌트에 전달 

state : (함수 내에 선언된 변수처럼) 컴포넌트 안에서 관리

 

 

# React Event

* 이벤트 처리하기 https://ko.reactjs.org/docs/handling-events.html

: 사용자의 버튼 클릭이나 데이터의 변경등과 같은 이벤트를 처리한다. 

: onChange(), onClick()

 

# 컴포넌트 자동으로 만들어 주는 약어 --  rafce

 

// import Welcome from "./components/welcome";
import {useState} from "react"; // state hook을 import
import ListComponent from "./components/ListComponent";

function App() {
  let username ="미입력";
  let [usernameWithState, setUsernameWithState] = useState("초기값");
  // [데이터를 사용할 변수명, 데이터를 바꿀 수 있는 메소드]

  const handleInputChange = (e) => {
    setUsernameWithState(e.target.value);
    console.log(usernameWithState);
  } 
  return (
  <div>
    이름 : <input onChange={handleInputChange}></input>
    <h1>{usernameWithState}</h1>
    <ListComponent></ListComponent>
  </div>
  );
}

export default App;

import React, {useState} from "react";
import Welcome from "./Welcome";

const ListComponent = () => {
    const [users, setUsers] = useState([
        { name: "홍길동", age: 12, height: 180 },
        { name: "동", age: 18, height: 180 },
        { name: "길동", age: 16, height: 180 },
      ]);

  return (
    <div>
        {users.map((user) => {
            return <Welcome username={user.name} age={user.age}></Welcome>;
        })}
    </div>
  );
};

export default ListComponent;

 

# npm ??

https://www.npmjs.com/

npm

: 라이브러리 백화점

이런식으로 필요한거 찾기!!

* react styling를 설치해보자

- 구성요소들의 디자인을 결정합니다. (CSS 와 같은 역할을 하며 문법도 비슷합니다)
- 스타일을 처리하는 방법은 className 등을 활용하는 방법에서 부터 styledcompoenet
SCSS 등 여러가지가 있습니다

{project_dir}> npm install styled-components

https://htmlcheatsheet.com/css/

Online Interactive CSS Cheat Sheet

이런 것도 있다.

 

# styled-components 사용하기

const HeaderBlock = styled.div`
  border-bottom: 1px solid #000;
  text-align: center;
  padding: 20px;
  font-size: 20px;
  font-weight: bold;
`;

- App.js

- src/components/HeaderWhite.js

 

 

---

* 참고 

 

핀테크 아카데미 "핀테크 서비스 개발 기초 과정" 강의

 http vs https 차이