-
[React.js] React 기초3 (+ props, 더미 데이터 구현, map(), filter())React 2022. 10. 28. 00:18
props : properties , 속성값을 의미한다.
Hello.js
import { useState } from "react"; import UserName from "./UserName"; export default function Hello({age}){ // let name="Mike"; const [name, setName] = useState('Mike'); //useState 는 배열을 반환하며, //배열의 첫번째 값은 state(변수명), //두번째 값은 이 스테이트를 변경해주는 함수, 괄호 안에 초기값 전달 //함수가 작동해서 스테이트가 바뀌면, 리액트는 이 컴포넌트를 다시 렌더링해준다. // 동일한 컴포넌트를 여러 번 사용해도 스테이트는 각각 관리된다. //마이크일 땐 제인으로, 제인일 땐 마이크로 바꿔준다. // setName(name === "Mike" ? "Jane" : "Mike"); 이렇게도 가능 // 넘겨받은 props 값을 변경하는 것이 아니라, 여기서 만든 age라는 스테이트 값을 변경하고 있는 것이다. const msg = age > 19 ? "성인입니다." : "미성년자입니다."; return ( <div> <h1>state</h1> <h2>컴포넌트의 속성값</h2> <h2>{name}({age}) : {msg}</h2> <UserName name={name} /> {/* 중괄호 속 name은 이 컴포넌트에서는 스테이트이지만 userName 컴포넌트 입장에서 프롭스다*/} <button onClick={()=>{ setName(name === "Mike" ? "Jane" : "Mike") }} > change </button> </div> ); }
App.js
import './App.css'; import Hello from './component/Hello'; import Welcome from './component/Welcome'; import styles from './App.module.css'; // 마지막 .js는 생략할 수 있다. function App() { return ( <div className="App"> <Hello age={10} /> <Hello age={20} /> <Hello age={30} /> </div> ); } export default App;
화면에서 어떤 데이터를 갱신할 때는 state 와 props 를 사용하는 것이 좋다.
컴포넌트 파일명은 대문자로 시작해야 한다.
데이터만 적절히 바꿔주면, 컴포넌트는 알아서 렌더링을 다시 하고, 화면의 UI 정보는 갱신된다. 일일이 어떤 요소를 어떤 데이터로 바꿔줘야 할지 찾아다닐 필요가 없는 것이다.
* API : Application Programming Interface, 정의 및 프로토콜 집합을 사용하여 두 소프트웨어 구성요소가 서로 통신할 수 있게 해주는 메커니즘이다. API의 하드웨어적인 구조(아키텍처)는 클라이언트와 서버 측면으로 설명된다.
- REST API : 4가지 API 중에서 오늘날 웹에서 가장 많이 사용되고 유연한 방식이다. 클라이언트가 서버에게 요청으로 데이터를 전송하면, 서비가 이 클라이언트 입력을 사용하여 내부 함수를 시작하고 출력된 데이터를 다시 클라이언트에게 반환해주는 방식이다.
- REST 는 Representational State Transfer으로, 클라이언트가 서버에 액세스하는데 사용할 수 있는 'GET, PUT, DELETE' 등의 함수 집합을 의미한다. 클라와 서버는 HTTP를 사용하여 데이터를 교환한다.
* 웹 API : 웹 서버와 웹 브라우저 간의 애플리케이션 처리 인터페이스이다. REST API는 표준 아키텍처 스타일을 사용하는 특수한 유형의 웹 API 이다.
* Application(애플리케이션) : API 의 맥락에서는 고유한 기능을 가진 소프트웨어를 의미한다.
* Interface(인터페이스) : 두 애플리케이션 간의 서비스 계약, 두 가지의 연결점, 접촉 구간
* 더미 데이터 : 유용한 데이터가 포함되지 않지만 공간을 예비해두어 실제 데이터가 명목상 존재하는 것처럼 다루는 유순한 정보를 의미한다. 더미 데이터는 테스트 및 운영 목적을 위해 플레이스홀더로 사용할 수 있다. 테스트를 위해 더미 데이터는 모든 변수와 데이터 필드가 채워져 있다는 것을 보증함으로써 소프트웨어 테스트 문제를 회피할 목적으로 사용할 수도 있다. 운영상의 목적에서 더미 데이터는 OPSEC 목적을 위해 전송이 가능하다. 더미 데이터는 예측되지 않은 영향을 주지 않도록 보장하기 위해 엄격히 평가되고 문서화되어야 한다.
* 프로토콜 : 컴퓨터 내부 또는 컴퓨터 간의 데이터 교환 방식을 정의하는 규칙 체계입니다. 기기 간 통신은 교환되는 데이터의 형식에 대해서 상호 합의를 요구하기 때문에, 이런 형식을 정의하는 규칙을 모아놓은 것이 프로토콜이다.
* 메커니즘 : 어떤 사물이나 현상이 작동하는 원리 또는 작용 과정
App.js
import './App.css'; import Hello from './component/Hello'; import Welcome from './component/Welcome'; import styles from './App.module.css'; import Header from './component/Header'; import DayList from './component/DayList'; import Day from './component/Day'; // 마지막 .js는 생략할 수 있다. function App() { return ( <div className="App"> <Header /> <DayList /> <Day /> </div> ); } export default App;
DayList.js
import dummy from "../db/data.json"; export default function DayList(){ console.log(dummy); return ( <ul className="list_day"> {dummy.days.map(day=>( <li key={day.id}>Day {day.day}</li> ))} </ul> ); } // 맵은 배열을 받아서 또다른 배열로 반환해주는 것인데, // 이떄 반환되는 요소를 JSX 형태로 작성해주면 된다. // key 반복되는 요소의 고유한 값으로 전달해야 되서 여기서는 day.id
Day.js
import dummy from "../db/data.json"; //더미 데이터 임포트 export default function Day(){ //dummy.words const day=2; const wordList = dummy.words.filter(word=>word.day===day) //dummy.words 에서 날짜가 1인 것만 필터를 통해서 출력하겠다 console.log(wordList); return <> <table> <tbody> {wordList.map(word=>( <tr key={word.id}> <td>{word.eng}</td> <td>{word.kor}</td> </tr> ))} </tbody> </table> </> }
Header.js
export default function Header(){ return( <div className="header"> <h1> <a href="/">토익 영단어(고급)</a> </h1> <div className="menu"> <a href="#x" className="link"> 단어 추가 </a> <a href="#x" className="link"> Day 추가 </a> </div> </div> ) }
data.json (더미 데이터)
{ "days" : [ {"id":1, "day":1}, {"id":2, "day":2}, {"id":3, "day":3} ], "words" : [ { "id" : 1, "day" : 1, "eng" : "book", "kor" : "책", "isDone" : false }, { "id" : 2, "day" : 1, "eng" : "apple", "kor" : "사과", "isDone" : false }, { "id" : 3, "day" : 2, "eng" : "car", "kor" : "자동차", "isDone" : false }, { "id" : 4, "day" : 2, "eng" : "pen", "kor" : "펜", "isDone" : false }, { "id" : 5, "day" : 2, "eng" : "cup", "kor" : "컵", "isDone" : false } ] }
외부 참조 링크
https://aws.amazon.com/ko/what-is/api/
https://artsandculture.google.com/entity/m0j3ccb7?hl=ko
'React' 카테고리의 다른 글
[React.js] React 기초5 (+ useEffect, fetch, react Hooks, useNavigate, PUT, DELETE, POST) (0) 2022.10.30 [React.js] React 기초4 (+ react-router-dom, REST API, JSON server) (0) 2022.10.30 [React.js] React 기초2 (+ css 파일, 이벤트 처리, state) (0) 2022.10.27 [React.js] React 기초1 (+ App.js) (0) 2022.10.26 [JS] 중급문법3 (+ String, Array 에서의 다양한 메소드들) (0) 2022.10.23