15일차

15일차는 React의 핵심개념과 create-react-app을 통해 react를 사용했다. 공부한 개념과 사용한 것들을 하나하나 복습을 통해 정리하고 다음 단계를 위해 준비해야겠다.

git: https://github.com/leeyulgok/3-Day-React

이번 강의때 배운 react코드다. 기초적인 부분부터 차근차근 배우고 있기 때문에 나중에 잘 사용하도록 해보자.

---

useState

useState란 상태(state)를 관리하기 위한 도구다. 처음에는 이 개념이 제대로 잡히지 않았는데, 어떤 한 도구의 상태라고 생각하니 그렇게 어렵지는 않았다. 간단한 예시로 설명하면 아래와 같다.

예시

const App = () => {
  const [counter, setCounter] = React.useState(0);
  const onClick = () => {
    setCounter((current) => current + 1);
  }

  return (
    <div>
    	<h1>Total Clicks: {counter}</h1>
		<button onClick={onClick}>Click me</button>
	</div>
  );
};

가장 첫 번째 줄에 useState를 사용한다. 이를 구조분해를 통해 counter와 setCounter라는 변수에 저장했다. counter라는 변수는 보여지는 부분이고, setCounter라는 변수는 counter의 상태를 관리하는 변수다.

그래서 버튼을 누르면 onClick이라는 함수를 통해 setCounter에서 1이 증가하는 상태를 관리한다. 결과는 사진과 같다.

결과

클릭하는 횟수에 따라 counter 상태가 변하여 1씩 증가한다. useState를 사용하면 이러한 변수의 상태를 관리가 가능하다. 가장 기본적인 개념이 되고 앞으로 사용할 일이 많으니 어떨 때 적용하는지 잘 기억해야 한다.

---

props

props는 React 컴포넌트에서 사용되는 속성들을 전달하기 위한 객체다. 부모 컴포넌트에서 자식 컴포넌트로 데이터를 전달하거나 컴포넌트 간에 상호작용을 할 때 주로 사용된다. 또한 재사용을 하거나 할 때 사용되기 때문에 react에 중요한 개념중 하나다.

예시

const Btn = props => {
  return (
    <button style={{backgroundColor: props.backgroundColor}}>{props.text}</button>
);
}

const App = () => {
  return (
    <div>
    	<Btn backgroundColor="red" text="클릭!"/>
    	<Btn backgroundColor="blue" text="클릭!"/>
    </div>
  )
};

위의 예시는 props를 사용해서 다른 색의 버튼을 만들었다. 우선 사진으로 보면 다음과 같다.

결과

props를 사용해서 App컴포넌트에서 Btn 컴포넌트로 backgroundColor 데이터를 보냈다. Btn 컴포넌트에서는 props로 backgroundColor 데이터를 받아 style과 text로 꾸민 결과다.

---

useEffect

useEffect란 컴포넌트가 렌더링될 때마다 특정 코드를 실행하거나, 컴포넌트가 업데이트되기 전이나 제거되기 전에 정리(clean-up) 작업을 수행한다.

예시

useEffect(() => {
  const timer = setInterval(() => {
    setCount((count) => count + 1)
  }, 1000);

  return () => {
    clearInterval(timer);
    console.log('clean up!');
  };
},[]);

useEffect를 사용해서 1초마다 카운트를 증가하는 코드를 짰다. timer 변수를 통해서 count의 상태를 설정했다. 반환으로는 clearInterval을 통해 타미어를 해제했다.

---

팁

1. jsconfig.json

jsconfig.json을 사용하면 절대경로를 사용할 수 있다.

{
  "compilerOptions": {
    "baseUrl": "src"
  },
  "includes": ["src"]
}

이 폴더를 만들어서 코드를 넣으면, src를 기본경로로 하여 절대경로로 사용이 가능하다. 그래서 아래와 같이 코드를 바꿀 수 있다.

기존코드

import First from "./components/01";

절대경로 코드

import First from "components/01";

지금은 별 거 아닌 것처럼 보여도 나중에 폴더가 많아 질 때는 편하게 사용이 가능할 것이다.

2. js와 jsx

이전까지 리액트를 할 때 .js파일을 사용했다. 그러나 강의를 통해 .jsx 파일을 사용했는데 차이점이 존재했다. 편리함이 달랐다. vsCode에서 html코드를 짤 때 tab키를 누르면 더 빠르게 코드 작성이 가능하다.

그런데 .js 파일을 사용할 때, JSX문법 내에서 html 코드를 짤 때는 tab가 안돼서 답답했다. 그러나 .jsx 파일은 .js파일과 똑같이 해도 tab키가 가능해서 보다 편하고 빠르게 코드 작성하는 것이 가능했다.

---

실습

실습으로는 간단하게 로그인 폼을 만드는 작업을 했다. 아이디가 admin이고 비밀번호가 password일 경우 로그인 성공, 그렇지 않으면 실패라는 alert 문구가 나오도록 헀다. 우선 코드를 확인 하면 아래와 같다.

코드

import React, { useState } from 'react';

const LoginForm = () => {
  const [username, setUsername] = useState('');
  const [password, setPassword] = useState('');

  const usernameHandler = (e) => {
    setUsername(e.target.value);
  };

  const passwordHandler = (e) => {
    setPassword(e.target.value);
  };

  const submitHandler = (e) => {
    e.preventDefault();

    if (username === 'admin' && password === 'password') {
      alert('로그인 성공');
    } else {
      alert('로그인 실패');
    }
  };

  return (
    <form onSubmit={submitHandler}>
      <div>
        <label htmlFor="username">아이디</label>
        <input
          type="text"
          id="username"
          value={username}
          onChange={usernameHandler}
        />
      </div>
      <div>
        <label htmlFor="password">비밀번호</label>
        <input
          type="password"
          id="password"
          value={password}
          onChange={passwordHandler}
        />
      </div>
      <button type="submit">로그인</button>
    </form>
  );
};

export default LoginForm;

useState()를 사용했다. 우선 return값부터 보면 form 태그에서 눈여겨 볼 부분은 form태그의 onSubmit과 input태그의 onChange부분이다.

우선 onSubmit은 버튼을 클릭했을 때의 동작을 나타내는데, 위에서 정의한 submitHandler 함수가 작동된다. 여기서 값이 요구한 값과 일치하는지 확인하고 메시지를 반환한다.

그리고 onChange는 정의한 usernameHandler와 passwordHandler 함수가 동작하여, 상태를 변경한다. 클릭이라는 event의 target과 거기에서의 value를 가져와서 세팅을 한다.

결과

이렇게 했을 때 결과는 사진과 같이 나온다.

---

정리하기

15일차는 매우 중요한 개념을 배웠다. useState, props는 예습하면서도 계속 사용하던 것들이다. 그렇기 때문에 쉽게 넘어가지 말고 복습을 통해, 다양한 사용 방식들을 통해 나만의 react로 만들어야겠다.

KPT

Keep

1. 꾸준히 기록하기.
2. 복습 계속하기.
3. 내 웹 페이지 만들어보기.

이렇게 계속 유지하면 좋을 것 같다. 기록, 복습, 예습. 3주간 꾸준히 하고 있으니 생각하지 말자. 그냥 하자.

Problem

1. 다양하게 못한 점.

다양하게 다뤄볼 줄 알아야 하는데, 그렇지 못한 점이 조금은 아쉽다. useState나 props를 언제 어떨 때 사용하는 것이 좋기 때문에 다양하게 해봐야겠다.

Try

1. 응용하기.

주말에는 한 주간 배운 내용을 한 번씩은 응용해서 해보도록 하는 노력이 필요할 것 같다. 단순히 하게 배운 걸 그대로 따라서 떠올리는 것도 좋지만, 더 나아가서는 이렇게 해보면 어떨까? 아니면 여기서 사용해보면 어떨까? 하는 자세를 가지는 게 중요하다.

3주차는 마치면서 앞으로에 대한 걱정이 생겼지만, 이런 걱정은 불필요한 걱정이다. 스스로가 잘하고 있다고 믿고 꾸준히 해보려고 계속 노력하는 자세를 갖자.

---

본 후기는 유데미-스나이퍼팩토리 10주 완성 프로젝트캠프 학습 일지 후기로 작성 되었습니다.
#프로젝트캠프 #프로젝트캠프후기 #유데미 #스나이퍼팩토리 #웅진씽크빅 #인사이드아웃 #IT개발캠프 #개발자부트캠프 #리액트 #react #부트캠프 #리액트캠프