1. React 기본 설정 & State 이해하기

 

버튼 클릭 횟수 웹

 

 

 

 어느덧 4학년의 첫 학기 개강을 했습니다. 그러다 보니 이제 슬슬 졸업 준비를 해야 하는데, 저희 학교 같은 경우에는 캡스톤이 졸업 필수라 팀에 참여했습니다. 근데 다들 저보다 너무 잘해서... 다급하게나마 공부를 해보려 합니다. 스크럼 경험 같은 부분은 이론 밖에 모르는지라 진행 방식 같은 쪽만 열심히 보고, 실질적으로 중요한 실력을 좀 쌓아보려고 해요. 이번에 프론트엔드로 참여하게 되어서 React를 최대한 빠르고 정확하게 공부해 보겠습니다.

 

 

1. 기본 설정

 

 우선 vscode에서 파일을 하나 생성해 줍니다. 파일 속의 파일 형태로 작업하고 싶지 않다면 그냥 진행해 주셔도 됩니다. 터미널을 켜서

npx create-react-app 파일이름(새로운 파일)

 

 을 적어 React의 기본 형태를 깔아줍니다. 시간이 한 3분 정도 걸리는 것 같네요. 설치가 다 되었으면 한 번 실행해 보셔도 됩니다. 실행하는 명령어는 

npm start

 

 입니다. 그러면 localhost:3000에서 리액트 로고와 그 웹사이트를 확인할 수 있으실 거예요. 이렇게 작동하는 게 확인 됐으면 본격적인 작업을 위해 필요 없는 파일들을 삭제해 줍시다. 저는 

 

React 파일 초기 설정

 

 이렇게만 남겨뒀어요. 로고 같은 걸 불러오는 코드 등도 지워줘야 하는데, 우선 필요 없는 css는 모든 줄을 다 지워주세요. index.js는 그대로 두시고, App.js는 

 

App.js 초기 설정

 

 만 남겨줍니다. 기본 설정 끝! 이 상태로 실행을 하시면 아마 아무것도 없는 창이 정상적으로 뜰 겁니다. 그러면 이 상태에서 작업을 시작하면 되겠죠!

 

 

2. React?

 

 우선 React의 핵심만 짚고 가봅시다. 저도 정확히는 잘 모르지만... 우선 React의 장점으로는

 

• interactive(상호작용) 웹을 쉽게 생성할 수 있음
• UI나 값이 변했을 때 그 부분만 리렌더링 함
• state 사용 가능

 입니다. 첫 번째 경우는 html코드를 JSX와 함께 사용해 조금 더 쉽게 코드를 작성할 수 있습니다. 그리고 두 번째는 만약 웹에 들어가는 요소가 너무 많은데 페이지를 자주 리렌더링 하면 그만큼 과부하가 걸리기 쉽습니다. 하지만 React는 어디가 바뀌었는지 알고, 그곳만 바꾸어줍니다.

 그리고 무엇보다 React의 가장 핵심적인 기능이죠! state를 사용할 수 있습니다. useState을 선언하면 반환 값으로 [초기값, 값을 바꾸는 함수]를 줍니다. 이 둘을 따로 사용함으로 대체로 

 

const [a, b] = useState(초기값);

 

 이렇게 사용됩니다. 이렇게 하면 a에는 초기 값이 들어가고, b에는 함수가 들어가게 됩니다. 그래서 b를 통해 a의 값을 바꾸면, React에서는 이 부분이 바뀌었다고 감지해 알아서 웹사이트에 반영해 줍니다. 그러니 굳이 사람이 리렌더링 코드를 넣어줄 필요가 없습니다. React가 알아서 해주니까요!

 

 

3. 예제

 

 React의 가장 대표적인 예제인 버튼을 눌렀을 때, 누른 횟수를 알려주는 웹을 작성해 보겠습니다. 자세한 설명은 코드에 적어볼게요! 우선 저는 app.js만 사용할 예정인데, app.js에서만 모든 것을 끝내고 index.js는 렌더링만 시킬 계획입니다. 감안하고 봐주세요.

 

App.js

import react from 'react';	// React 라이브러리 가져옴
import './App.css';	// css 연동(아직 아무것도 없음)

function App() {
  const [data, setData] = react.useState(0);	// 초기 값이 0인 data, data를 바꾸는 함수 setData
  const btnClick = () => {	// 버튼을 눌렀을 때의 함수
    setData(data + 1);	// data의 값에서 1을 더해서 반환, 작동되면 리렌더링(새로고침)
  }
  
  // html 태그를 return을 반환해 웹사이트에 띄워줌, return에 html 태그 사용
  return (
    <div>
      <h3> Clicked {data} times</h3>	// 몇 번 눌렀는지 알려줌, 변수를 {변수} 형태로 작성
      <button onClick={btnClick}> Click </button>	// 누르는 버튼, 누르면 버튼 클릭 함수 호출
    </div>
  );
}

export default App;

 

 

 이해가 되셨을는지 모르겠네요. 우선 h3과 버튼을 선언해 준 후, 버튼에는 이벤트 리스너를 달아줍니다. html에서는 addEventListener을 따로 사용해야 했지만, React는 그냥 바로 뒤에 적어주면 돼요. JSX 형태라고도 합니다. 그리고 버튼을 눌러서 눌린 횟수에 +1을 해줍니다. 이 값이 변하자마자 웹에 적용되었으면 좋겠으니 setState를 사용합니다. 그래서 setData로 data의 값을 하나 더해주면 자동으로 리렌더링 되면서 그 값을 바로 보여줍니다. 

 

 

 가장 기본적인 내용들만 해서 그런지 아직은 할만합니다. 옛날에 이게 뭔지 모르겠는데 프로젝트는 해야 하니 절규하면서 대충 썼던 기억도 나네요. 아마 그게 곧 다시 닥쳐올 미래가 될 것 같긴 하지만... 하여튼 폐 끼치지 않도록 최대한 열심히 해보겠습니다. 화이팅!