Today I Learned 2023.02.24. [React 입문1]

Dongchan Alex Kim·2023년 2월 24일

JSX Props React useState 불변성 컴포넌트

Today I Learned

목록 보기

16/31

A JavaScript library for building user interfaces

우리는 리액트를 통해 UI를 만들 수 있고, 그걸 이용해서 구축하는 작업을 한다.

React는 SPA프레임워크이다.(Single Page Application)

리렌더링에 용이하다.
MPA(multi page application)에서는 페이지가 갱신될 때마다 계속 렌더링되면서 깜빡이기 때문에 매우 불편할 수 밖에 없다.
서버에 단 한번의 리소스 요청으로 이루어져있고, 그 후에는 기존 페이지를 수정해주는 방식이다.

단점

SEO(Search Engine Organization)을 위해서 HTML페이지 전체가 필요한데 그렇지 않기 때문에,
검색에 매우 취약하다고 한다.

CRA란?

Create React App이란 뜻으로, 한 줄의 명령어 입력으로 React 프로젝트 개발에 필수요소를 자동으로 구성하는 방법이다.

ls #현재 내가 위치하고 있는 곳

cd 폴더이름 #리액트 프로젝트를 생성하고 폴더

yarn create react-app week-1 #프로젝트 생성

cd week-1 # week-1 폴더로 이동

yarn start # 프로젝트 시작

React Component

컴포넌트를 통해 UI를 재사용이 가능한 개별적인 여러 조각으로 나누고, 각 조각을 개별적으로 살펴볼 수 있다.

import React from 'react'

function Son(props){
	console. log ('props', props.GFatherName) 
	return <div>나는{props.GFatherName}의 손자입니다.</div>
}

//부모 -> 자식 정보를 전달했다.
function Mother(props){
    const GFatherName = props.GrandFatherName:
    return <Son GFatherName = {GFatherName}/>
}
    
function GrandFather(){
	const name = '산타할아버지'
    return <Mother GrandFatherName = {name}/>
}
    
function App() {
	return <GrandFather/>
}

export default App

컴포넌트는 App 컴포넌트이기 때문에 App 컴포넌트가 화면에 보여집니다.

JSX

javascript + HTML

<p style={{color: 'orange', fontSize: '20px'}}>orange</p>
//혹은 스타일 객체를 변수로 만들어 쓴다.
function App() {
  const styles = {
    color: 'orange',
    fontSize: '20px'
  };

  return (
    <div className="App">
      <p style={styles}>orange</p>
    </div>
  );
}

<input type='text' />
닫는 태그를 하지 않으면 Error가 나옵니다.
최상위 태그가 2개면 오류난다. -> 무조건 최상위 '< div >' 로 묶어줘야 한다.
{ } 안에 Javascript 인수들을 넣어서 반환할 수 있다.

props

컴포넌트 간의 데이터 교류 방법
1. props는 반드시 위에서 아래 방향으로 흐른다. 부모 → 자식방향으로만 흐른다(단방향).
2. props는 무조건 읽기 전용으로 취급하며, 변경하지 않는다.
props drilling -> 부모-자식간의 단계가 많아지면서 유지보수 측면에서 매우매우 비효율적인 상태가 나타난다.

import React from "react";

function App() {
  return <GrandFather />;
}

function GrandFather() {
  return <Mother />;
}

function Mother() {
	const name = '홍부인';
  return <Child motherName={name} />; // 💡"props로 name을 전달했다."
}

function Child(props) {
  console.log(props)
  return <div>나는 아들이다!</div>;
}


export default App;

콘솔에 찍히는 걸 잘 봐보자!

지정한 이름으로 키-벨류 쌍으로 반환된다.

!! JSX에서도 { } 중괄호를 사용하면 자바스크립트 코드를 사용할 수 있다.

function Child(props) {
  return <div>{props.motherName}</div>;
}

props - children

import React from "react";

function User(props) {
  return <div>{props.children}</div>;
}

function App() {
  return <User>안녕하세요</User>;
}
export default App;

자식 컴포넌트로 정보를 전달하는 또 다른 방법이다.
앞에서 봐왔던 그 props의 또다른 방법이다.
<user> <user>를 이용해 부모의 데이터를 보내고, 자식은 props를 이용해 위에서 보던 방식과 동일하게 데이터를 받아낸다.

활용안
layout을 임포트해서 가지고 온 후에 똑같은 형태의 style이나, header를 구성해낼 수 있다.
props 구조분해

function Todo({ title, body, isDone, id }){
	return <div>{title}</div>
}

ㅅㅂ 어려운거 아니잖아? JS 했으면 이정돈 알아야지

default Props

import React from 'react';

function Child({ name }){
	return <div>내 이름은 {name} 입니다. </div>
}

Child.defaultProps={
	name: '기본 이름'
}

export default Child

이런 식으로 defaultProps를 설정하면, 부모 컨포넌트로부터 props요소를 받지 못하더라도, 임시로 채워넣을 수 있다.

State

State란 UI로의 반영을 위해서 컴포넌트 내부에서 바뀔 수 있는 값을 말한다.
리액트에만 존재하는 개념이자 훅 이다

const [ value, setValue ] = useState( 초기값 )

const [ ] 빈 배열을 생성
-> 배열의 첫번째 자리에는 이 state의 이름을 지어준다
-> 두번째 자리에는 setstate의 이름을 지어준다.
-> useState( ) 의 인자에는 이 state의 처음값을 만들어준다.

import React, { useState } from "react";

function Child(props) {
  return (
    <div>
      <button
        onClick={() => {
					props.setName("박할아"); 
        }}
      >
        할아버지 이름 바꾸기
      </button>
      <div>{props.grandFatherName}</div>
    </div>
  );
}

function Mother(props) {
  return (
    <Child grandFatherName={props.grandFatherName} setName={props.setName} />
  );
}

function GrandFather() {
  const [name, setName] = useState("김할아");
  return <Mother grandFatherName={name} setName={setName} />;
}

function App() {
  return <GrandFather />;
}

export default App;

state를 변경할때는 setValue를 이용해서 값을 바꾼다.
이때 우리는 이벤트헨들러를 이용해서 접근할 수도 있다. => event 객체를 꺼내서 이용 가능! (event.target.value)

onchange() : onchange 함수는 작성한 javascript를 통해 변화가 일어났는지 탐지해준다고 한다.

import React, { useState } from "react";

const App = () => {
  const [value, setValue] = useState("");

  const onChangeHandler = (event) => {
    const inputValue = event.target.value;
    setValue(inputValue);
  };
  return (
    <div>
      <input type="text" onChange={onChangeHandler} value={value} />
    </div>
  );
};

export default App;