참고 : 생활코딩 React 2022 개정판
https://www.youtube.com/playlist?list=PLuHgQVnccGMCOGstdDZvH41x0Vtvwyxu7
알게 될 것
- 리액트는 사용자 정의 태그를 만드는 기술입니다.
- Props는 컴포넌트의 외부에서 사용하는 입력값입니다.
- State는 컴포넌트 내부에서 사용하는 값입니다.
- 이벤트는 Props를 이용합니다.
- event.preventDefault()를 이용해서 기본동작을 비활성화 할 수 있습니다.
- form을 변경할 때는 Props를 State로 전환 후 onChange를 이용합니다.
React 2022년 개정판 - 2. 실습환경구축
- create-react-app을 사용하려면 npx create-react-app my-app을 입력해야한다.
- npx 사용하려면 node.js 설치해야한다.
- vscode에서 프로젝트 폴더를 등록 → 터미널 → npx create-react-app . (현재 디렉토리니까 . 으로) → 엔터 → 설치 y 선택
- npm start : 리액트 개발환경이 실행되면서 코딩을 할 수 있는 환경이 동작한다.
React 2022년 개정판 - 3. 소스코드수정방법
- create-react-app을 이용해서 개발환경을 세팅하면 어떤 디렉토리 구조를 갖게 되는지 설명
제일 중요한 것이 src폴더
index.js : 입구 파일, npm start로 create react app을 구동시키면 이 도구는 index.js를 찾고 거기에 적혀있는데로 동작하게 되는 것
<App /> : 디렉토리 안에 있는 App.js로 부터 이 태그가 온 것
즉 ! index.js가 입구고, 여러가지 전역적인 설정들이 들어간다.
<App /> 안에 App.js가 들어가고, 여기서 내용을 편집하며 ui를 만들어 가는 것 !
App.css : 페이지 디자인은 여기서 수정하면 된다.
- index.js에도 index.css가 있는데, 여기 디자인을 날리면 기본적으로 샘플앱에서 사용하고 있는 css를 초기화 시켜 깔끔한 상태로 시작할 수 있다.
왼쪽 핑크 부분이 오른쪽 핑크 부분인건 알겠는데, 오른쪽 id가 root는 뭐지?
index.js에서 <App /> 태그가 id 값이 root인 tag로 렌더링하라는 코드가 있다. 이 태그는 public폴더의 index.html의 내용에 있다.
- npm start를 이용해서 실행시킨 것은 개발을 위한 어플리케이션, 실제 서비스에 사용할 결과물은 아님.
- 서비스에 최적화 되어 있는 배포본을 만드는 법
먼저 터미널 킨다
기존의 개발환경 끄는 법은(컨트롤+c)
npm run build* : 빌드 명령이 시작, 배포판을 만드는 과정 !
빌드하면 build 폴더가 생기고, index.html 파일을 열어보면 공백이 없다. (배포할 때 필요없어서, 파일 용량 줄이기 위해)
결과물을 실행해보면, 빌드 명령어를 실행하게 되면 빌드한 결과를 서비스할 때 serve라는 앱을 사용하는 것을 추천함.
serve(웹서버)의 옵션 중 -s 옵션을 주면, 사용자가 어떤 경로로 들어오건 간에 index.html 파일을 서비스 해주게 된다. build라는 폴더를 지정하면 이 폴더의 index.html파일을 서비스 해주겠다는 것.
serve는 node.js로 만들어진 어플리케이션, 간편하게 실행시킬 때는 npx를 쓰면된다 npx serve -s build 라고 하면 빌드 폴더에 있는 index.html을 서비스하는 웹서버가 실행된다. 접속하는 주소가 나오고 접속하면 실제로 서비스에서 사용할 수 있는 버전의 파일이 만들어지고 서비스 된 것을 볼 수 있다 ! 😲
React 2022년 개정판 - 4. 컴포넌트만들기
리액트는 사용자 정의 태그를 만드는 기술
- 사용자 정의 태그를 만들 때는 함수를 정의하면 되는데, 반드시 대문자로 시작해야한다. 이것을 컴포넌트라고 한다.
- 각각의 코드가 이름을 갖고 있기 때문에 어떠한 취지의 코드인지 금방 파악할 수 있고, 내용을 바꾸면 그 컴포넌트를 사용하고 있는 모든 곳이 동시에 수정되는 효과가 있다.
- 리액트는 속성을 PROP이라고 부른다.
- function에 파라미터로 props 적으면 props에는 객체가 넘어온다.
그리고 return값이 있는 구문에는 {props.title} 이런식으로 중괄호 적어주면 일반적인 문자열이 표현식으로 취급되어서 내용이 해석되어 반영된다.
나머지도 다 바꿔보면 이런식이다.
- 동적으로 만든 태그들은 key값 줘야한다. (반복문 안에서 고유하게)이유는 자동으로 생성한 태그의 경우 리액트가 추적을 해야하는데 근거가 있어야한다.
- 리액트에게 key라고 하는 약속된 prop을 부여함으로써 성능을 높이고 정확한 동작을 해주게 협조해 주는 것 !
- 리액트는 함수가 호출 될 때 이벤트 객체를 첫번째 파라미터로 주입한다.(이벤트 상황을 제어할 수 있는 여러가지 정보와 기능이 있다)
- event.preventDefault() : a태그가 동작하는 기본동작을 방지(클릭해도 리로드가 일어나지 않음)
- props.onChangeMode() : head에 props로 전달된 onChangeMode가 가리키는 이 함수를 호출하는 것
- 이렇게 컴포넌트에 이벤트 기능을 부여해서, 컴포넌트 사용자가 헤더를 클릭했을 때 해야할 작업을 처리했다.
위 코드를 function을 축약하면 arrow function으로 바꾸면
- 리액트 컴포넌트는 입력과 출력이 있다.
- prop을 통해서 입력된 데이터를 우리가 만든 컴포넌트 함수가 처리해서 리턴값을 만들면 바로 그 리턴값이 새로운 ui가 된다. prop과 함께 컴포넌트 함수를 다시 실행해서 새로운 리턴값을 만들어주는 또 하나의 데이터가 state
- 둘 다 모두 이 값이 변경되면 새로운 리턴값을 만들어서 ui를 바꾼다. 2개의 차이점은 prop은 컴포넌트 사용하는 외부자를 위한 데이터 state는 컴포넌트를 만드는 내부자를 위한 데이터
- state : 변수 대신 쓰는 데이터 저장공간, useState()를 이용해 만들어야함, 문자, 숫자, array, object 다 저장가능 - 코딩애플
- state에 데이터 저장해놓는 이유 : 웹이 App처럼 동작하게 만들고 싶어서, state는 변경되면 HTML이 자동으로 재렌더링이 된다. HTML이 새로고침 없이도 스무스하게 변경됨(그냥 변수는 변경되어도 자동 재렌더링 안됨) - 코딩애플
- 자주 바뀌는, 중요한 데이터를 변수말고 state로 저장해서 쓰자
- state를 사용하려면 import {useState} from ‘react’;
useState라는 hook을 이용해야한다. 리액트에서 제공하는 기본적인 함수.
useState는 배열을 리턴, 0번째 원소는 상태의 값을 읽을 때 쓰는 데이터, 1번째 데이터는 상태의 값을 변경할 때 사용하는 함수
[state데이터, state 데이터 변경 함수]
useState의 인자는 그 state의 초기값이다. state의 값은 0번째 인덱스의 값으로 있고, state를 바꿀 때는 1번째 인덱스의 값으로 함수로 바꾼다.
한줄이 위의 3줄과 똑같은 것이다. 축약형이다.
js를 클릭하면 welcome에서 read로 바뀐다
mode가 setMode로 인해서 read로 바뀜, App 컴포넌트가 다시 실행되고, useState가 mode의 값을 read로 세팅해줌. 그래서 read니까 컨텐트도 바뀔 것이고, 그것이 화면에 렌더링 되면 이런 결과가 나온다.
