상수데이터
export const RECOMMEND_DATA = [
{
id: 1,
userId: 'jihyun219',
userName: 'jihyun',
src: '/images/jihyunLee/profile.jpg',
},
{
id: 2,
userId: 'jihyun123',
userName: 'jihyun',
src: '/images/jihyunLee/profile.jpg',
},
{
id: 3,
userId: 'jiyoung999',
userName: 'jihyun',
src: '/images/jihyunLee/profile.jpg',
},
];
상수데이터에서 [ ] 배열로 선언한 이유는 무엇일까?
바로 map 메서드를 사용하기 위해서이다.
<div className="user_profiles">
{RECOMMEND_DATA.map(story => {
return (
<div className="user_profile_one" key={story.id}>
<div>
<img src={story.src} alt="profile" />
<p className="profile">
{story.userId}
<span className="gray_color">{story.userName}</span>
</p>
</div>
<p className="follow">팔로우</p>
</div>
);
})}
이렇게 반복되는 코드를 달라지는 부분만 바꾸면서 반복적으로 쓸 수 있다.
이때 키를 꼭 써주어야 한다. 참고로 키는 꼭 고유한 값이어야 한다.
목데이터
목데이터는 먼저 json 파일을 따로 만들어주자. (위치는 public 밑, data 밑..)
[
{
"id": 1,
"userId": 'jihyun219',
"userName": 'jihyun',
"src": '/images/jihyunLee/profile.jpg',
},
{
"id": 2,
"userId": 'jihyun123',
"userName": 'jihyun',
"src": '/images/jihyunLee/profile.jpg',
},
{
"id": 3,
"userId": 'jiyoung999',
"userName": 'jihyun',
"src": '/images/jihyunLee/profile.jpg',
},
];
상수데이터와 무엇이 다를까?
-> 변수에다가 저장을 안한다.
상수데이터는 변수를 통해 접근 가능했다. 그러나 목데이터는 값 자체이다.
import React, { useState } from "react";
function MockData(){
const [data, setData] = useState([]); // useState 사용
useEffect(()=>{}, []); // useEffect 사용
return ()...
useState 를 이런식으로 사용해주어야 한다.
또한 useEffect 를 사용해주어야 한다.
import React, { useState } from "react";
function MockData(){
const [data, setData] = useState([]);
useEffect(()=>{
fetch("/data/storyData.json") // '/' 로 시작하는건 public 을 의미
.then((response)=>response.json()) // 응답으로 json 파일 받아온 것
.then((response)=>{
console.log(response)
}, []);
return ()...
fetch 명령을 통해 데이터를 받아온다.
응답을 받아온 것을 콘솔로그에 찍어보는 코드이다.
import React, { useState } from "react";
function MockData(){
const [data, setData] = useState([]);
useEffect(()=>{
fetch("/data/storyData.json") // '/' 로 시작하는건 public 을 의미
.then((response)=>response.json()) // 응답으로 json 파일 받아온 것
.then((response)=>{
setData(response); // data 변수 변경
}, []);
return ()...
이제 setData 를 통해 data 변수에 저장되어 있는 값을 바꿔보는 코드이다.
function MockData(){
const [data, setData] = useState([]);
useEffect(()=>{
fetch("/data/storyData.json") // '/' 로 시작하는건 public 을 의미
.then((response)=>response.json()) // 응답으로 json 파일 받아온 것
.then((response)=>{
setData(response);
}, []);
return ( // 필요한 곳에 data 변수를 삽입
<div className="rightSectionStoryContainer">
{data.map(story) => {
return (
<div className="rightSectionStory" key={story.id}>
<img alt="user profile" src={story.src} className="rightSectionStoryIcon">
<span className="rightSectionStoryId">{story.id}</span>
</div>
);
})}
</div>
);
}
export default MockData;
return 을 통해 data 변수를 필요한 곳에 넣어준다.
데이터 fetching 및 조건부 렌더링
export default function App(){
const [data, setData] = useState({}); // 초기값: 비어있는 객체
useEffect(() => {
fetch("/mock.json")
.then((res) => res.json())
.then((res) => setData(res)); // 응답 받은 값을 data 에 저장
}, []);
return (
<div className="App">
<h1>Hello useEffect!</h1>
<h2>조건부 렌더링 연습 문제</h2>
<ul>
{data.users.map((user) => {
return <li key={user.id}>{user.username}</li>;
})}
</ul>
</div>
);
}
이 코드에서의 초기값은 비어있는 객체{ } 이다.
초기값 선정하는 것이 중요하다. 왜냐하면 어떤 타입의 데이터가 들어갈지 결정해주는 것이기 때문이다.
근데 지금 이 코드는 오류가 날 것이다. (ul 태그 부분)
useEffect 부분은 랜더링 이후에 실행되는 것이기 때문이다.
return 이 먼저 시작되고... 그래서 data.user 를 찾고 있는데 useEffect 가 아직 실행 안되었기 때문에 data 는 빈 객체이다. 빈 객체에서 user 라는 프로퍼티를 찾으려고 하니 안되는 것이다.
따라서 undefined 가 출력될 것이다. undefined 에서 map 을 사용하려고 하니 안되는 것이다.
export default function App(){
const [data, setData] = useState({}); // 초기값: 객체
useEffect(() => {
fetch("/mock.json")
.then((res) => res.json())
.then((res) => setData(res)); // 응답 받은 값을 data 에 저장
}, []);
if (data.users === undefined) return <div>데이터 없음</div> // 새로고침하면 "데이터없음"이 뜨다가 바로 ui 가 그려진다.
return (
<div className="App">
<h1>Hello useEffect!</h1>
<h2>조건부 렌더링 연습 문제</h2>
<ul>
{data.users.map((user) => {
return <li key={user.id}>{user.username}</li>;
})}
</ul>
</div>
);
}
먼저
1. 리턴 === 종료로, "데이터 없음" 이 출력된다.
2. useEffect 함수가 실행된다.
3. 데이터가 갖고 와진다.
4. 두번째 리턴이 실행된다. 화면 ui 가 그려진다.
useEffect 는 아래처럼 많이 사용한다. 기억해두자.
export default function App(){
const [data, setData] = useState({}); // 초기값: 객체
useEffect(() => {
fetch("/mock.json")
.then((res) => res.json())
.then((res) => setData(res)); // 응답 받은 값을 data 에 저장
}, []);
return (
<div className="App">
<h1>Hello useEffect!</h1>
<h2>조건부 렌더링 연습 문제</h2>
<ul>
{data.users &&
data.users.map((user) => {
return <li key={user.id}>{user.username}</li>;
})}
</ul>
</div>
);
}
이것은 "단축연산자" 라고 하는데 자세히 알아보겠다!
const condition = true;
condition && console.log('통과!');
condition 이 true 이면 뒤엣것이 실행된다.
condition 이 false 이면 condition 이 리턴된다. (즉 condition 이 그대로 나온다)
const condition = undefined;
condition && console.log('통과!');
참고로 undefined 는 null 이다.
그럼 false 이므로 condition이 나온다.
또한 만약 빈문자열로 초기값을 정해줬다면 처음엔 실행이 안됬다가 (false)
다음부터 실행이 된다.
[ ] 라면 true 이다. 비어있든 안비어있든 true 이다. { } 도 true 이다.
export default function App(){
const [data, setData] = useState({}); // 초기값: 객체
useEffect(() => {
fetch("/mock.json")
.then((res) => res.json())
.then((res) => setData(res)); // 응답 받은 값을 data 에 저장
}, []);
return (
<div className="App">
<h1>Hello useEffect!</h1>
<h2>조건부 렌더링 연습 문제</h2>
<ul>
{data.users &&
data.users.map((user) => {
return <li key={user.id}>{user.username}</li>;
})}
</ul>
</div>
);
}
그래서 처음 랜더링 될때는 undefined 가 되고 false 이므로 앞엣것이 리턴 -> 처음에 undefined 가 나오므로 에러가 뜨지 않는다.
그 다음 useEffect 가 실행 되고 데이터를 받아온다.
그 후 ul 부분의 단축연산자에서 뒤엣것이 실행되서 화면 ui 가 그려진다.
많이 실수하는 것이기 때문에 잘 알아두자.
단축연산자는 정말 많이 쓰인다. 나는 삼항 연산자를 잘 이용했었는데 단축 연산자가 실무에서 많이 쓰인다고 한다!
function Greetin(props){
const { isLogin, name, point } = props;
return {
<div>
{ isLogin ? (
<div>
<p>{name} 님 환영합니다!</p>
<p>현재 보유중인 포인트는 { point }원입니다.</p>
</div>
) : null }
</div>
}
}
위의 코드는 아래와 같이 사용이 가능하다.
function Greetin(props){
const { isLogin, name, point } = props;
return {
<div>
{ isLogin && (
<div>
<p>{name} 님 환영합니다!</p>
<p>현재 보유중인 포인트는 { point }원입니다.</p>
</div>
)}
</div>
}
}
&& 연산자 사용 시 주의해야할 점
1. 변수가 숫자 타입인 경우 0은 false 이다.
2. 변수가 문자열 타입인 경우 빈 문자열 "" 도 false 이다.
// 리턴 안
<Comment text='데이터' />
<Comment text='dskfhsdlfhsdf' />
<Comment text='fdf' />
<Comment text='gfgfdgd' />
// js 파일
const COMMENT_DATA = [
{
text: "데이터",
},
{
text: "sdfdsfds",
},
{
text: "dfdf",
},
{
text: "dgdsgds",
},
]
// 리턴 안은 이렇게 바꿀 수 있다
{COMMENT_DATA.map((comment) => {
return <COMMENT text={comment.text} />;
})}
fetch 함수로 바꾸는 방법도 연습해보자.
'💎 React' 카테고리의 다른 글
| 리액트 204 에러 (0) | 2021.12.08 |
|---|---|
| 장바구니 창 조절 (0) | 2021.12.03 |
| 리액트 훅, useEffect (0) | 2021.11.25 |
| 리액트 댓글 달기 (0) | 2021.11.24 |
| props 사용법 (0) | 2021.11.22 |