리액트 앱 실행
리액트 앱 다시 실행하기
터미널 -> 리액트 앱의 루트 폴더 -> npm start 명령어 입력 -> 자동으로 리액트 앱 실행
이때 터미널을 종료하면 안 된다.
코드 수정하기
App.js 파일에서
App( )함수의 반환값이 많아지면 소괄호로 감싸야한다.
↓
컴포넌트
컴포넌트 정의 (by. App.js )
App( ) 함수가 정의되어 있고,
HTML을 반환한다.
컴포넌트 사용 (by. index.js )
<App />을 ReactDOM .render( ) 함수의 첫번째 인자로 전달한다. = App 컴포넌트가 반환하는 것들을 화면에 그릴 수 있다.
App 컴포넌트가 그려질 위치는 ReactDOM .render( ) 함수의 두번째 인자로 전달한다. -> App 컴포넌트는 아이디가 root인 엘리먼트에 그려질 것이다.
그려진다 = render
컴포넌트 = <App />
리액트는 컴포넌트와 함꼐 동작하고, 리액트 앱은 모두 컴포넌트로 구성된다.
JSX
컴포넌트는 자바스크립트와 HTML을 조합한 JSX라는 문법을 사용해서 만든다.
Potato 컴포넌트 만들기
src 폴더 안에 Potato.js 파일 만든다.
첫글자는 반드시 대문자로 한다.
맨위에 import React from "react"; 입력한다. -> 리액트가 JSX 이해하게 한다.
Potato( ) 함수 작성
function Potato( ) { }
Potato 컴포넌트가 JSX를 반환
return <h3> I love potato </h3>;
HTML이 아니라 JSX 이다.
마지막에 쉼표 잊지말기
마지막 줄에 export 추가
export default Potato;
다른 파일에서 Potato 컴포넌트를 사용할 수 있다.
Potato.js 완성
Potato 컴포넌트 사용하기
index.js 파일에서 Potato 컴포넌트 어떻게 사용 가능할까?
App 컴포넌트가 사용된 부분에 Potato 컴포넌트 추가하면
ReactDOM .render( <App /><Potato />, document .getElementById('root') );
오류! 리액트는 최종으로 한개의 컴포넌트를 그려야 한다.
Potato 컴포넌트는 App 컴포넌트 안에 넣어야 한다.
<Potato /> 삭제해서 원래대로 돌려 놓는다.
App 컴포넌트에 Potato 컴포넌트 임포트 하기
위에서 두번째 줄에 import Potato from './Potato' ; 추가한다.
./ 현재 파일이 있는 폴더
../ 현재 파일이 있는 상위 폴더
App 컴포넌트에 Potato 컴포넌트 포함시켜서 사용
Hello 태그 밑에다 추가한다.
개발자 도구에서 Potato 컴포넌트 살펴보기
<body>태그 안 <div id="root"> 태그 안에 태그가 보인다.
리액트가 <Potato />를 해석해서 <h3> I love potato </h3>로 만들었다.
컴포넌트는 JSX로 만든다, JSX는 JS와 HTML을 조합한 문법을 사용한다.
리액트는 컴포넌트를 가져와서 브라우저가 이해할 수 있는 HTML로 만든다.
Potato.js 파일 삭제하고 App.js 파일 수정하기
Potato.js 지우고 App.js 에서도 import Potato 지운다.
오류! 여전히 App.js 에서는 Potato 컴포넌트 사용하기 때문이다.
App 컴포넌트 안에 Potato 컴포넌트 만들기
App.js 파일에 Potato( )함수를 만든다.
App.js 파일에 Potato 컴포넌트 포함시키는 이유 : 여러 파일을 이동하며 코드 작업하기 싫어서
(짧은 코드의 컴포넌트는 모두 App 컴포넌트 안에 작성 가능하다.)
props
props는 컴포넌트에서 컴포넌트로 전달하는 데이터이다.
props는 리액트 컴포넌트로 넘어가는 매개변수이다.
props를 사용하면 컴포넌트를 효율적으로 재사용 가능하다.
함수의 매개변수와 비슷하다.(매개변수 이용하면 함수 효율적 재사용)
함수 (javascript.info)---매개변수 파트를 보자.
함수
ko.javascript.info
컴포넌트 여러개 사용해 보기
영화 앱에 영화 목록이 있고, 그 영화 목록을 컴포넌트로 표현하자.
Potao 컴포넌트 이름을 Movie로 바꿔보자.
Movie 컴포넌트 1개 = 영화 목록 1개
영화 목록을 20개 그리려면? Movie 컴포넌트 여러개 늘어 놓으면 될까?
Movie 컴포넌트를 10개 복사해서 붙여넣기
앱 실행하면 I like potato가 10개 출력된다.
비효율적이다.
출력하는 값이 모두 I like potato로 같다.
컴포넌트가 서로 다른 값을 출력해야 영화 목록을 구현할 수 있다.
→컴포넌트로 데이터를 보내는 방법 필요 = props
props로 컴포넌트에 데이터 전달하기
컴포넌트의 이름을 Movie에서 Food로 변경하자. Movie 컴포넌트는 모두 삭제하자.
음식 앱 만들어 볼 것이다.
props를 이용하여 Food 컴포넌트에 데이터를 보낼 것이다.
<Food />를 <Food fav ="kimchi" />로 수정해보자
fav props의 값으로 "kimchi"를 추가한 것이다.
이것이 props를 이용해서 Food 컴포넌트에 데이터를 보내는 방법이다.
props의 이름은 fav이고, fav에 "kimchi"라는 값을 담아 Food 컴포넌트에 보낸 것이다.
props에 있는 데이터
→ 문자열(" ") : 그냥 쓴다
→ 불리언 값(true, false), 숫자, 배열([ ]) : 중괄호{ }로 값을 감싼다.
Food 컴포넌트에 props 전달하기
Food 컴포넌트에 something, papapa props를 추가해보자.
문자열이 아닌 값은 중괄호로 감싸서 전달한다.
리액트 앱 실행해봐도 화면에는 아무 변화 없다.
→컴포넌트에 props 보내기만 했을 뿐 아직 사용하지 않았기 때문이다.
props 사용하기
일단 Food 컴포넌트의 인자로 전달된 props를 출력해보자.
Food( )함수의 첫번째 인자에는 props가 넘어온다.
개발자 도구 실행해서 [Console] 탭을 확인해보자.
Food 컴포넌트에 전달한 props(fav, something, papapa)를 속성으로 가지는 객체(Object)가 출력되었다.
props 다시 한 번 사용하기
something, papapa props는 지우자.
콘솔에는 {fav: "kimchi"}만 출력된다. 문자열 "kimchi"만 출력하고 싶다면 어떻게 할까?
Food 컴포넌트에 props에 있는 데이터 "kimchi"를 화면에 출력
props.fav를 중괄호로 감싸서 사용한다.
객체에 있는 값을 사용하려면 점 연산자( . )를 쓴다.
구조 분해 할당으로 props 사용하기
자바스크립트 ES6 문법 중 구조 분해 할당(destructing assignment)을 사용하면 점 연산자 사용 안해도 된다.
다음은 Food 컴포넌트로 전달한 fav props를 Food 컴포넌트(함수)에서 {fav} = props; 와 같은 방법으로 사용한 예이다.
두 방법 중 아무거나 사용해도 된다.
점 연산자 : props에 포함된 단어가 적을 때 사용
구조 분해 할당 : props에 포함된 단어가 많을 때 사용
여러 개의 컴포넌트에 props 사용하기
똑같은 Food 컴포넌트를 반복해서 사용하되, fav props의 값이 서로 다르게 코딩한다.
Food 컴포넌트 3개 추가하고 fav props의 값이 다르도록 코드 수정한다.
앞으로 props 사용할 때 구조 분해 할당 사용할 예정이다.
Food 컴포넌트 4번 재사용했다. 각각 fav props에는 다른 값이 들어있다. 서로 다른 문장이 출력된다.
정리
1. 컴포넌트가 무엇인가, JSX 공부했다.
2. JSX는 HTML + JavaScript 조합한 문법이다.
3. JSX 이용해서 컴포넌트 작성, 컴포넌트는 대문자로 시작한다.
4. 컴포넌트에 데이터 전달할 때는 props 사용한다.
props에 있는 데이터가 하나의 객체로 변환되어 컴포넌트(함수)의 인자로 전달된다.
인자를 받아서 컴포넌트에서 사용할 수 있다.
구조 분해 할당을 사용하면 props를 편리한 방법으로 사용 가능하다.
'React' 카테고리의 다른 글
| 노마드코더 : React(영화 웹 서비스) - 4. state와 클래스형 컴포넌트 (0) | 2020.12.01 |
|---|---|
| 노마드코더 : React(영화 웹 서비스) - 3. 컴포넌트 많이 만들기, map()함수, 경고 메세지 수정, prop-types 도입 (by. 음식 앱) (0) | 2020.11.28 |
| 생활코딩 : React - Update & Delete 기능 구현 (0) | 2020.11.18 |
| 생활코딩 : React - Create 기능 구현 (18~19강) (1) | 2020.11.11 |
| 생활코딩 : React - 컴포넌트 이벤트 : onChangePage 이벤트 생산자가 되다 (17강) (0) | 2020.11.07 |