시행착오 기술 블로그

Form 개발

React를 이용해 사용자로부터 데이터를 입력받아 처리하기 위한 관문인 Form

이번 실습에서는 State와 이벤트를 활용해 개발을 진행

구현할 Form의 형태

1. 컴포넌트 형태로 개발
2. Form 컴포넌트 내부에서 State를 이용해 사용자의 입력을 저장/관리
3. Form의 Submit 이벤트가 발생되면 부모 컴포넌트로 그 데이터를 전달

import React, { useState, useCallback } from "react";

const InsertForm = ({ onInsert }) => {
    const [inputValue, setInputValue] = useState("");
    
    const handleSubmit = useCallback((event) => {
        // 기본적인 HTML 동작으로 인해 페이지가 새로고침 되는 것을 방지
        event.preventDefault(); 
        // props로 넘어온 onInsert가 정상적인 함수인 지 확인하여 에러 방지
        if(typeof onInsert === "function" && inputValue) { 
            onInsert(inputValue);
        }
        // state 초기화
        setInputValue("");
    },[onInsert, inputValue])

    return (
        <form onSubmit={handleSubmit}>
            <input value={inputValue} onChange={(event) => {
                setInputValue(event.target.value);
            }} />
            <button type="submit">등록</button>
        </form>
    )

}

export default InsertForm;

List 표현

Form으로부터 전달받은 값들을 리스트에 저장 후, 리스트의 값을 Array 메소드 이용하여 순차적으로 화면에 출력

구현할 List의 형태

1. Form으로부터 전달받은 값을 todoList array에 push하는 로직

//src/App.js


import React, { useState } from 'react';
import InsertForm from "./components/InsertForm";
import ListView from "./components/ListView";

function App() {
  const [todoList, setTodoList] = useState([]);
  
  const handleInsert = (value) => {
    setTodoList((current) => {
      const newList = [...current];
      newList.push({
        key: new Date().getTime(), // JSX에서 Array의 값을 표현할 때 각 요소를 구분하기 위한 값
        value: value, // onInsert로부터 전달받은 값,
        isCompleted: false, // 완료 처리를 위한 flag
      });
      return newList;
    })
  }
  
  const handleComplete = (index) => {
    setTodoList((current) => {
      const newList = [...current];
      newList[index].isCompleted = true;
      return newList;
    })
  }
  
  const handleRemove = (index) => {
    setTodoList((current) => {
      const newList = [...current];
      newList.splice(index, 1);
      return newList;
    })
  }
  
  return (
    <div className="App">
        <ListView todoList={todoList} onComplete={handleComplete} onRemove={handleRemove} />
        <InsertForm onInsert={handleInsert} />
    </div>
  );
}

export default App;

1. todoList와 핸들링함수를 props로 전달받아 화면에 출력하는 ListView 컴포넌트

// src/component/ListView.js


import React from "react";

const ListView = ({todoList, onComplete, onRemove}) => {
  return (
    <div>
      <ol>
        {todoList.map((item, index) => {
          return (
            <li key={item.key}>
              <span>{item.value}</span>
              <button type="button" onClick={() => {
                if(typeof onComplete === "function") {
                  onComplete(index);
                }
              }}>완료</button>
              <button type="button" onClick={() => {
                if(typeof onRemove === "function") {
                  onRemove(index);
                }
              }}>삭제</button>
            </li>
          );
        })}
      </ol>
    </div>
  )

}

export default ListView;

CSS 꾸미기

1. CSS 불러오기

별도의 CSS 파일을 작성 후 프로젝트에 적용하고 싶은 경우 import해서 스타일을 적용한다.

import "./App.css";

2. jsx 내에서 inline style로 적용하기

스타일은 반드시 object로 적는다. {{ }}

(jsx에서 자바스크립트 표현을 사용하겠다는 의미의 괄호 + object라는 의미의 괄호)

* 주의) Property name은 camel case로 적는다.

return (
    <form
      onSubmit={handleSubmit}
      style={{
        backgroundColor: '#ffffff',
        borderRadius: '16px',
        marginBottom: '16px',
        display: 'flex',
        justifyContent: 'space-between',
        alignItems: 'center',
      }}
    >
      <input
        value={inputValue}
        onChange={event => {
          setInputValue(event.target.value);
        }}
        style={{
          flex: 1,
          border: 'none',
          color: '#000000',
          padding: '6px, 12px',
          backgroundColor: 'transparent',
        }}
      />
      <button
        type="submit"
        style={{
          border: 'none',
          borderRadius: 16,
          backgroundColor: '#3ab6bc',
          color: '#ffffff',
          cursor: 'pointer',
          padding: '8px 16px',
        }}
      >
        등록
      </button>
    </form>
  );

jsx에서 스타일은 반드시 camel case로 선언해야 함!!

background-color 대신 backgroundColor
border-radius 대신 borderRadius

부가 기능 구현

• 완료버튼 클릭시 이펙트(애니메이션) 추가하기

.listview ol li span {
    ...
    position: relative;
}
.listview ol li span::after {
   content: "";
   position: absolute;
   left: 0;
   top: 50%;
   transition: width 0.2s ease-in-out;
   width: 0%;
   height: 3px;
   background-color: #524FA1;
}
.listview ol li.completed span::after {
   width: 100%;
}

// 제거
.listview ol li.completed span

• todolist 개수를 제한하기

list가 10개 이상이면 제한하는 기능

  const isLimitReached = useMemo(() => {
    return todoList.length >= 10;
  }, [todoList]);
  
  
  return (
    <div className="App">
      <ListView
        todoList={todoList}
        onComplete={handleComplete}
        onRemove={handleRemove}
      />

      {isLimitReached && (
        <div
          style={{
            padding: '8px 16px',
            border: '1px solid #FA466A',
            backgroundColor: '#feecf0',
            color: '#FA466A',
            marginBottom: 16,
          }}
        >
          ※ 할일 목록이 너무 많습니다.
        </div>
      )}
      <InsertForm onInsert={handleInsert} disabled={isLimitReached} />
    </div>
  );

Hook 이란?

컴포넌트에서 데이터를 관리(State)하고, 데이터가 변경될 때 상호작용(Effect)을 하기 위해 사용된다.

State Hook과 Effect Hook이 있다.

Hook이 필요한 이유?

기존 컴포넌트 내에서 State와 생명주기를 관리하기 위해서 반드시 클래스 컴포넌트를 사용해야 했다.

클래스 컴포넌트를 보완하고 함수 컴포넌트에서 클래스 컴포넌트의 기능을 구현하기 위해 추가된 Hook

Hook 사용시 주의사항

Hook은 React함수(컴포넌트, Hook) 내에서만 사용이 가능하다.

Hook의 이름은 반드시 use로 시작해야 한다.

최상위 레벨에서만 Hook을 호출할 수 있다.

1. state hook

- useState는 컴포넌트 내 동적인 데이터를 관리할 수 있는 hook

- 최초에 useState가 호출될 때 초기값으로 설정되며 이후 재렌더링이 될 경우 무시된다.

- state는 읽기 전용이므로 직접 수정하지 않기

- state를 변경하기 위해서는 setState를 이용하거나 혹은 현재 값을 매개변수로 받는 함수를 전달

- state가 변경되면 자동으로 컴포넌트가 재 렌더링 된다.

2. effect hook

useEffect(EffectCallBack, Deps?)

effect hook을 사용하면 함수 컴포넌트에서 side effect를 수행할 수 있다

컴포넌트가 최초로 렌더링 될 때 지정한 State나 Prop가 변경될 때마다 이펙트 콜백 함수가 호출된다.

Effect Hook 사용 형태

const App = () => {
  useEffect(EffectCallback, Deps);
}

예제1) input 태그 안에 값이 변경될 때마다 effect callback 함수가 실행됨

import React, { useState, useEffect } from 'react';

function App() {
  const [inputValue, setInputValue] = useState('default');
  useEffect(() => {
    console.log(inputValue);
  }, [inputValue]);				//depth 있으면 변경될때마다 콜백함수가 실행됨
  return (
    <div className="App">
      <input
        value={inputValue}
        onChange={event => {
          setInputValue(event.target.value);
        }}
      />
    </div>
  );
}

export default App;

예제2) 컴포넌트가 생성되고 제거될때만 실행됨

컴포넌트가 생성됐을 때, 컴포넌트가 소멸될 때를 감지해서 특정 로직을 실행할 수 있다.

useEffect의 이펙트 함수 내에서 다른 함수를 리턴하는 경우 state가 변경되어 컴포넌트가 다시 렌더링되기 전과 컴포넌트가 없어질 때(destroy) 호출할 함수를 지정하게 된다.

버튼을 누르면 <Greeting/>이 생성되고 삭제된다.

<Greeting/> 내부 effect 함수는 depth가 [ ]이라 컴포넌트 생성, 소멸시에만 콜백함수가 실행되도록 한다.

Effect Callback 함수에서 반환하는 함수는 현 상태가 종료될 때 호출된다.

// src/components/Greeting.js

import React, { useEffect } from 'react';

const Greeting = () => {
  useEffect(() => {
    console.log('컴포넌트가 생성되었습니다.');		// <Greeting/>컴포넌트 생성시 실행
    return () => {
      console.log('컴포넌트가 소멸되었습니다.');		// <Greeting/>컴포넌트 소멸시 실행
    };
  }, []);
  return <h1>안녕하세요</h1>;
};

export default Greeting;

import React, { useState } from 'react';
import Greeting from './components/Greeting';

function App() {
  const [isCreated, setIsCreated] = useState(false);
  return (
    <div className="App">
      <button
        onClick={() => {
          setIsCreated(current => {
            console.log('!current', !current);
            return !current;
          });
        }}
      >
        컴포넌트 생성/제거
      </button>
      
      // isCreated가 true이면 <Greeting/> 생성, false이면 삭제
      {isCreated && <Greeting />}
    </div>
  );
}

export default App;

useMemo( ) 훅

지정한 State나 Props가 변경될 경우 해당값을 활용해 계산된 값을 메모이제이션하여 재렌더링 시 불필요한 연산 줄인다.

오래 걸리는 로직을 작성하지 않는 것을 권장한다.

import React, { useState, useMemo } from 'react';

function App() {
  const [foo, setFoo] = useState(0);
  const [bar, setBar] = useState(0);
  
  // foo, bar 두 값 중 하나라도 변경되면 useMemo에 정의한 함수가 실행된다.
  const multi = useMemo(() => {
    return foo * bar;
  }, [foo, bar]);

  return (
    <div className="App">
      <input
        value={foo}
        onChange={event => {
          setFoo(parseInt(event.target.value));
        }}
      ></input>
      <input
        value={bar}
        onChange={event => {
          setBar(parseInt(event.target.value));
        }}
      ></input>
      <div>{multi}</div>			// memo한 값 호출
    </div>
  );
}

export default App;

useCallback( ) 훅

함수를 메모이제이션 하기 위해 사용하는 Hook이다. 컴포넌트가 재렌더링 될 때 불필요하게 함수가 다시 생성되는 것을 방지한다. useMemo(()=> fn, deps) 와 useCallback(fn, deps)는 같은 기능을 수행한다.

import React, { useState, useCallback } from 'react';

function App() {
  const [foo, setFoo] = useState(0);
  const [bar, setBar] = useState(0);
  
	// useCallback 함수 이용해 메모이제이션 하는 Hook
  const calc = useCallback(() => {
    return foo + bar;
  }, [foo, bar]);

  return (
    <div className="App">
      <input
        value={foo}
        onChange={event => {
          setFoo(parseInt(event.target.value));
        }}
      />
      <input
        value={bar}
        onChange={event => {
          setBar(parseInt(event.target.value));
        }}
      />
      <div>{calc()}</div>		// 함수 형태로 호출
    </div>
  );
}

export default App;

useRef( ) 훅

컴포넌트 생애 주기 내에서 유지할 ref 객체를 반환한다.

ref 객체는 .current라는 프로퍼티를 가지며, 이 값을 자유롭게 변경할 수 있다.

일반적으로 React에서 DOM 엘레멘트에 접근할 때 사용한다.

useRef에 의해 반환된 ref객체가 변경되어도 컴포넌트가 재렌더링 되지 않는다.

import React, { useRef } from 'react';

function App() {
  const inputRef = useRef();

  return (
    <div className="App">
      <input ref={inputRef} />		// input의 ref를 useRef()로 선언함
      <button
        onClick={() => {
          alert(inputRef.current.value);		// 접근할 땐 current 놓치면 안됨
        }}
      >
        클릭
      </button>
    </div>
  );
}

export default App;

나만의 hook, custom hook

자신만의 hook을 만들면, 컴포넌트 로직을 함수로 뽑아내어 재사용할 수 있다.

UI 요소의 재상용성을 올리기 위해 컴포넌트를 만드는 것처럼, 로직의 재사용성을 높이기 위해서는 커스텀훅을 제작한다.

- 한 로직이 여러번 사용될 경우 함수를 분리하는 것처럼, Hook을 만드는것

- Hook 이름은 use로 시작해야 한다.

- 한 Hook내 State는 공유되지 않는다.

초기값으로 inOn state를 저장한 다음, toggle()함수가 호출되면 state를 반전하여 저장하는 훅

// src/hooks/useToggle.js

import { useState } from 'react';
const useToggle = initialValue => {
  const [isOn, setIsOn] = useState(initialValue);
  const toggle = () => {
    setIsOn(current => {
      return !current;
    });
  };
  return { isOn, toggle };
};
export default useToggle;

버튼 클릭하면 useToggle이라는 훅이 실행되며 true일땐 "켜짐" false일땐 "꺼짐"으로 변경된다.

import React from 'react';
import useToggle from './hooks/useToggle';

function App() {
  const { isOn, toggle } = useToggle(false);
  return (
    <div className="App">
      <button
        onClick={() => {
          toggle();
        }}
      >
        {isOn ? '켜짐' : '꺼짐'}
      </button>
    </div>
  );
}

export default App;

나만의 훅 만들어서 사용하기

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

// 나만의 훅 만들기
const useUser = () => {
  // useState()를 이용해 state 변수를 만드세요.
  const [nickname, setNickname] = useState("");

  const updateNickname = (event) => {
    const nickname = event.target.value;
    setNickname(nickname);
  };

  return [nickname, updateNickname];
};



// 내가 만든 나만의 훅 가져다 쓰기
const App = () => {
  // React Hook을 호출하세요.
  const [nickname, setNickname] = useUser();

  return (
    <div>
      <label>{nickname}</label>
      <br />
      <input value={nickname} onChange={setNickname} />
    </div>
  );
};

export default App;

이벤트

웹 브라우저가 알려주는 HTML요소에 대한 사건 발생

사용자의 행동에 의해 발생하거나, 개발자가 의도한 로직에 의해 발생한다.

DOM 이벤트 종류

onClick - element 클릭을 감지

onChange - element 내용(input의 텍스트 변경, 파일선택 등) 변경 감지

onKeyDown, onKeyUp, onKeyPress - 키보드 입력을 감지

onDoubleClick - element를 더블클릭 했을 때

onFocus - element에 마우스가 포커스 됐을 때

onBlur - element가 포커스를 잃었을 때

onSubmit - 폼 element에서 제출했을 때

이벤트 핸들러 함수

발생된 이벤트를 자바스크립트를 이용해 대응할 수 있다. 

이벤트 핸들러 함수안에 다양한 로직을 처리하고, 그 결과를 사용자에게 출력하여 알릴 수도 있다.

이벤트 처리 방법

(1) 핸들링 함수를 선언

import React from 'react';

function App() {
	
  const handleChange = event => {		// 핸들링 함수를 선언
    console.log(event);
  };
  
  return (
    <div className="App">
      <input onChange={handleChange} />		// input element와 핸들링 함수를 연결
    </div>
  );
}

export default App;

(2) 익명함수를 선언

import React from 'react';

function App() {
  return (
    <div className="App">
        <input onChange={(event) => {			// 이벤트 익명함수로 작성
            console.log(event.target.value)
        }}/>
    </div>
  );
}

export default App;

컴포넌트 내 이벤트 처리

(1) DOM 버튼 클릭

DOM element의 클릭 이벤트를 전달받아 처리

// src/App.js 파일

import React from 'react';
import Greeting from './components/Greeting';
function App() {
  return (
    <div className="App">
      <Greeting />			// 컴포넌트 삽입
    </div>
  );
}

export default App;

// src/components/Greeting.js

import React from 'react';

const Greeting = () => {
  const handleClick = () => {						// 컴포넌트 내에 이벤트 정의
    alert('안녕하세요');
  };
  return <button onClick={handleClick}>클릭</button>;			// 컴포넌트 내 이벤트 처리
};

export default Greeting;

(2) event와 state 연동하기

React로 애플리케이션을 개발하다보면

실시간으로 사용자로부터 값을 전달받아 컴포넌트에 반영할 일이 많기 때문에

이벤트와 State는 뗄래야 뗄 수 없는 관계라고 할 수 있다.

import React, { useState } from 'react'; 		// state를 쓰기 위해 useState 추가

function App() {
  const [inputValue, setInputValue] = useState('');	// state는 반드시 한쌍으로 정의됨
  return (
    <div className="App">
      <input
        onChange={event => {
          setInputValue(event.target.value);		// state는 반드시 set으로 저장되어야 함.
        }}
      ></input>
      <span>{inputValue}</span>				// stat는 변수처럼 가져다 사용 가능
    </div>
  );
}

export default App;

event.target.value : event object의 target은 이벤트의 원인이 되는 element를 가리킨다.

(3) 한개의 이벤트 핸들러를 이용해 여러 element에 재사용하기

state를 여러 개 선언할 수도 있지만 object를 활용하여 여러개의 input을 state로 관리하는 방법이 있다.

import React, { useState } from 'react';
function App() {

  // state를 object로 선언
  const [person, setPerson] = useState({
    name: '김민수',
    school: '엘리스대학교',
  });

  // 이벤트 핸들러 선언
  const handleChange = event => {
    const { name, value } = event.target;
    setPerson(current => {
      const newPerson = { ...current };
      newPerson[name] = value;
      return newPerson;
    });
  };
  
  
  return (
    <div className="App">
      // element 2개(input name, input school)에서 같은 핸들러함수 호출 가능
      <input name="name" value={person.name} onChange={handleChange}></input>
      <input name="school" value={person.school} onChange={handleChange}></input>
      
      <button
        onClick={() =>
          alert(`${person.name}님은 ${person.school}에 재학 중입니다.`)
        }
      >
        클릭
      </button>
    </div>
  );
}

export default App;

컴포넌트 외부로부터 이벤트를 전달받아 처리하기

(1) 컴포넌트 간 이벤트 전달하기

부모 컴포넌트에서 생성된 이벤트 핸들링 함수를 자식 컴포넌트로 전달하여 처리할 수 있다

src/components 디렉토리를 생성하고 MyForm.js 파일을 생성합니다.
MyForm 컴포넌트를 선언합니다. 
이 컴포넌트는 onChange 라는 함수를 Props로부터 전달받습니다.
MyForm 컴포넌트에서 <input> element를 반환. 
생성한 input element에 Props로부터 전달받은 onChange 함수를 전달
App.js로 돌아와 MyForm 컴포넌트를 import합니다.
username state를 선언합니다. 초기값은 ""입니다.
className이 "App"인 div 안에 <h1> element를 생성하고 내용은 OOO님 환영합니다.가 출력되도록 합니다.
(OOO에는 username state가 대입돼야 합니다.)
<h1> element 아래에

// app.js 파일

import React, { useState } from 'react';
import MyForm from './components/MyForm.js';

function App() {
  const [username, setUsername] = useState('');
  return (
    <div className="App">
      <h1>{username}님 환영합니다.</h1>
      <MyForm
        onChange={event => {
          setUsername(event.target.value);
        }}
      />
    </div>
  );
} 

export default App;

// components/MyForm.js

import React from 'react';

const MyForm = ({ onChange }) => {
  return <input onChange={onChange} />;
};

export default MyForm;

(2) 커스텀 이벤트

단순히 DOM 이벤트를 활용하는 것을 넘어서 나만의 이벤트를 만들 수도 있다.

이벤트 명명법

직접 이벤트를 만들 때에는 이름을 자유롭게 설정할 수 있다.

보톤은 on+동사 또는 on+명사+동사 형태로 작성한다.

State란

State는 컴포넌트 내에서 유동적으로 변할 수 있는 값을 저장한다.

즉, State는 컴포넌트 내에서 지속적으로 변경이 일어나는 값을 관리하기 위해 사용

개발자가 의도한 동작에 의해 변할 수도 있고, 사용자 입력에 따라 변할 수 있다.

State값이 변경되어 재렌더링이 필요한 경우, 

React가 자동으로 계산하여 변경된 부분만을 렌더링한다.

- State값은 직접 변경해서는 안된다. setState로 변경하지 않는다면, 리액트가 변화를 인지하지 못한다.

- Object를 갖는 State를 만들 때, Object의 값을 변경하려면 새로운 객체를 만들어 수정해야 한다.

State 선언방법

(1) useState

import { useState } from "react";		// useState를 import 해야함

const App = () => {
    const [value, setValue] = useState(초기값);	// [stateName, setStateName]으로 선언
    return ...
}

(2) setState : 값 변경

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

setValue("안녕하세요");

지시사항

1. React 패키지로부터 useState를 import 하세요.
2. App 컴포넌트 내에 count state를 선언합니다. 초기값은 0입니다.

   const [count, setCount] = useState(0);

3. className이 App인 div 안에 <span>과 <button>을 각각 작성하세요.
4. 작성한 span element에 X회 클릭하였습니다. 라는 문구를 작성합니다. X에는 선언한 count가 들어가야합니다.
5. 작성한 button에 onClick 이벤트 처리 함수를 작성합니다. click 시 setCount를 이용해 count가 1씩 증가할 수 있도록 합니다. 이벤트 처리 함수는 다음과 같이 작성합니다.

import React, { useState } from 'react';

function App() {
  //  [stateName, setStateName]으로 선언
  const [count, setCount] = useState(0);

  return (
    <div className="App">
      <span>{count}회 클릭하였습니다.</span>
      <button
        onClick={() => {
          setCount((current) => {
            return current + 1;
          });
        }}
      >
        클릭
      </button>
    </div>
  );
}

export default App;

Object를 갖는 State

State는 string과 number 뿐만 아니라 object나 array도 값으로 할당할 수 있습니다.
그러나 object나 array의 값을 변경하기 위해서는 주의해야할 점이 있습니다.
바로 object나 array 내부의 값만 변경할 경우 React가 새로운 값으로 변경된 것을 인지하지 못한다는 것인데요.
object나 array를 값으로 갖는 state를 다룰 때 어떻게 코드를 작성해야하는 지 알아봅시다.

잘못된 예

const App = () => {
    const [person, setPerson] = useState({
        name: "민수",
        age: 23
    });
    .
    .
    .
    setPerson((current) => {
        current.age = 24;
        return current;
    })
}

위 예시의 코드를 실행할 경우 state가 변경되더라도 컴포넌트가 다시 렌더링되지 않습니다. 이유는 person 내부의 값은 변경되었지만 person 자체가 변경된 것은 아니기 때문이죠.
예를 들어 박스 안에 사과가 있는데 이 사과를 꺼내고 배를 넣었다고 해서 박스는 바뀌지 않는 것 처럼요. React는 박스 자체가 바뀔 경우에만 변경을 인지하고 다시 렌더링을 하게 됩니다.

올바른 예

const App = () => {
    const [person, setPerson] = useState({
        name: "민수",
        age: 23
    });
    .
    .
    .
    setPerson((current) => {
        const newPerson = {...current}; // Spread syntax(전개구문)를 이용해 object를 복사했습니다.
        newPerson.age = 24;
        return newPerson;
    })
}

import React, { useState } from 'react';

function App() {
  const [person, setPerson] = useState({
    name: '김민수',
    count: 0,
  });
  return (
    <div className="App">
      <button
        onClick={() => {
          setPerson(current => {
            const newPerson = { ...current };
            newPerson.count = newPerson.count + 1;
            return newPerson;
          });
        }}
      >
        클릭
      </button>
      <span>{person.name}님이 버튼을 {person.count}회 클릭하였습니다.</span>
    </div>
  );
}

export default App;

Props

컴포넌트에 원하는 값을 넘겨줄 때 사용.

컴포넌트를 활용할 때 부모 Element로부터 자식 Element로 데이터를 전달해 주기 위해서 사용된다.

변수, 함수, 객체, 배열 등 자바스크립트의 요소라면 제한이 없다.

주로 컴포넌트의 재사용을 위해 사용한다.

Props가 변경되면 컴포넌트가 다시 렌더링된다.

부모 컴포넌트로부터 전달받은 Props를 임의로 재할당해서 사용할 경우 컴포넌트를 렌더링할 때 문제가 발생할 수 있다.

<input> element의 기본값은 defaultValue, defaultChecked로 설정합니다.

* Props는 읽기 전용

Prop 활용한 component

// App.js

import React from 'react';
import Greeting from './components/Greeting';
function App() {
  return (
    <div className="App">
      <Greeting username="김민수" />		// 컴포넌스 사용. props 함께 전달
    </div>
  );
}

export default App;

// component/Greeting.js

import React from 'react';

const Greeting = (props) => {			// props 전달받음
  const { username } = props;			// Destructuring assignment(구조 분해 할당)
  return <h1>{username}님 안녕하세요.</h1>;
};

export default Greeting;

Object를 전달받는 component

Props를 객체로 전달받을 수 있음.

// src/components/Student.js

import React from 'react';

const Student = ({ student }) => {
  const strPass = student.score >= 80 ? 'PASS' : 'FAIL';		//삼항연산자
  return (
    <div>
      {student.name} 학생은 {student.subject} 수업을 수강중입니다.
      <br />
      현재 점수는 {student.score}점으로 {strPass}입니다.
    </div>
  );
};

export default Student;

// App.js

import React from 'react';
import './App.css';
import Student from './components/Student.js';

function App() {
  const student1 = {
    name: '김민수',
    subject: '수학',
    score: 88,
  };
  const student2 = {
    name: '홍길동',
    subject: '영어',
    score: 72,
  };

  return (
    <div className="App">
      <Student student={student1} />		// props가 객체인 경우 중괄호 필수
      <Student student={student2} />
    </div>
  );
}

export default App;

JSX

JSX (Javascipt XML)

함수 호출과 객체 생성을 위한 문법적 편의를 제공하는 Javascript의 확장 개념

HTML과 비슷하게 생겼지만 Javascript의 속하며, HTML과 다른 부분도 있음.

JSX는 컴포넌트를 구성하기 위해 사용한다.

실제로 배포할 때에는 Trans compile이 되어 JavaScript로 변환된다.

JSX 장점

1. 개발자 편의성 향상

2. 협업에 용이, 생산성 향상

3. 문법 오류 감소, 코드량 감소

4. HTML 태그 내에서 Javascript 연산이 가능함

JSX와 HTML의 차이점

1. class 대신 className

- <p className="p tag"> ... </p>

2. 스타일은 Object로 넣어야 해서 < ... style = {{ padding: 10 }}>

- 첫번째 중괄호 : 자바스크립트 시작과 끝을 의미

- 두번째 중괄호: 자바스크립트 object의 시작과 끝을 의미

3. 닫는 태그가 필수 (br, img, input까지도)

- <input type = "text" />

 - <br />

4. 최상단 element는 반드시 하나여야 함

예제 코드

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

function App() {
  return (
    <div className="App">		//최상단 element는 1개, class 대신 className
      <div
        style={{			// 스타일은 {{ }} 안에
          padding: '48px',		// ; 세미콜론 아님, 콤마
          backgroundColor: 'blue', 	// background-color 아님 backgroundColor 맞음
          color: 'red',
        }}
      >
        안녕하세요.
      </div>
    </div>
  );
}

export default App;

컴포넌트

컴포넌트

1. react에서 페이지를 구성하는 최소 단위

2. component의 이름은 대문자로 시작

3. Class component, Function component(함수형태의 컴포넌트)로 나뉜다.

4. Controlled Component:데이터를 state로 관리 

    Uncontrolled Component : 필요한 데이터를 elemenet에서 가져옴

5. props: 자식element는 상위 부모 element에서 데이터를 받아 사용

즉,

컴포넌트 끼리 데이터를 주고 받을 때 Props

컴포넌트 내에서 데이터를 관리할 때 State

데이터는 부모에서 자식으로 전달된다.

예제 코드

./components/Welcome.js


import React from "react";

const Welcome = () => {
    const username= "철수"
    return <h1>{username}님 안녕하세요.</h1>
}

export default Welcome;

src/App.jsx


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

function App() {
  return (
    <div className="App">
      <Welcome />
    </div>
  );
}

export default App;

CDN

Contents Delivery Network

지리적, 물리적으로 떨어져 있는 사용자에게 컨텐츠 제공자의 컨텐츠를 빠르게 제공할 수 있는 기술

- 온라인 콘텐츠 빠르게 전송 가능

- 시스템을 정상적으로 사용 가능한 정도가 높다.

- 외부의 다양한 공격을 방지한다.

index.html 파일 내 head 태그 내에 아래 React와 ReactDom에 대한 CDN을 연결하는 코드

    <!-- CDN 연결을 통해 React를 사용할 수도 있습니다. -->
    <script crossorigin src="https://unpkg.com/react@17/umd/react.production.min.js"></script>
    <script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.production.min.js"></script>

Create React App

Create React App

리액트 프로젝트를 손쉽게 생성할 수 있게 도와주는 보일러플레이트

다양한 커맨드 제공하고 있음

CRA 장점

1. 개발에만 집중할 수 있게 함.

- 불필요한 코드 비공개

- 강력한 커맨드 제공

2. 모든 브라우저에서 해석되도록 transcompile 지원

- transcompile 라이브러리인 바벨 Babel 내장

- 배포시 코드 번들링(압축)인 웹팩 Webpack 제공

CRA 단점

Create React App은 기본적으로 Client-side Rendering만 지원

Node.js / NPM

Node.js

nodejs.org 사이트 접속 후, node lts 최신버전 다운로드

exe파일로 설치 후, cmd 창에서 "node -v" 입력하면 버전정보 확인 가능. -> 설치 잘 됐다는 확인용

NPM

node package manager 

node.js 기반의 모듈을 모아놓은 저장소

설치는 node.js 설치할 때 자동으로 설치된다.

많이 사용하는 명령어

npm install			// package.json에 정의된 의존성패키지들을 설치
npm install packageName 	// 특정 패키지를 설치
npm start			// node.js 이용한 프로젝트 실행
npm build			// 프로젝트 빌드

ctrl+c				// npm start 한 다음 종료하기

리액트 프로젝트 생성

npx

npm 패키지를 1회성으로 내려받아 사용하고자 할때 쓰는 명령어

npx create-react-app myProject	// 패키지 내려받기
cd myProject			// 디렉토리 이동 
npm start			// 현재 디렉토리의 프로젝트를 실행

필요 개념

SPA (Single Page Application)

최초에 서버로부터 HTML을 전달받고, 페이지의 변경이 필요할 때 변경이 필요한 부분을 JSON으로 전달받는다.

이때 페이지에서 변경된 부분만 계산하여 다시 그린다.

React

사용자 인터페이스를 만들기 위한 Javascript 라이브러리

- 컴포넌트 단위로 앱을 작성하여 코드의 재사용성을 늘릴 수 있다.

- 한 페이지에서 데이터가 자주 바뀌는 웹앱을 개발하는 데 적절하다.

- React는 Facebook, Instagram 등 대규모 서비스에서 사용되고 있다

- React는 대규모 프로젝트에서 데이터를 효율적으로 관리하는데 유용하지만 실행속도 면에서는 다소 불리함

- React에서는 컴포넌트 내의 데이터가 바뀌면 자동으로 감지하여 UI를 업데이트함

Component

React에서 서비스를 개발하는 데 있어 독립적인 단위로 쪼개어 구현

Virtual DOM

가상적인 표현을 메모리에 저장하고, ReactDOM과 같은 라이브러리에 의해 실제 DOM과 동기화하는 프로그래밍 개념

React는 내부적으로 Virtual DOM을 통해 렌더링을 진행한 뒤에 변경점만 사용자 화면에 반영한다.

React 배우는 이유

React 장점

1. 생산성/ 재사용성 

Component와 Hook을 활용하여 작은 단위의 독립적인 요소를 개발하여,

개발자의 생산성과 코드 재사용성을 높인다.

2. 풍부한 자료, 라이브러리

현재 React는 전세계적으로 활발하게 커뮤니티 활동이 이뤄지고 있어, 방대한 자료와 편리한 라이브러리 등이 공유됨

3. 다양한 사용처

웹 어플리케이션 외에도 React-Native에 적용하여 안드로이드나 iOS 어플리케이션 개발 가능함.

React 필수 지식

ch1. JSX와 컴포넌트

ch2. Props와 State : 컴포넌트 간 데이터 통신

ch3. 이벤트 처리

ch4. Hooks