•
사이즈나 마진같은 거를 전역적으로 만들고 컴포넌트는 컴포넌트만을 위해서 만들어야 된다.
전역컴포넌트 폴더를 만들고, 전용페이지는 전용페이지에 컴포넌트 폴더로 만들어서 관리하면 좋다.
부트스트랩도 설치 가능
npm i bootstrap
Java
복사
리액트에서 부트스트랩을 쓸수 있게 설치
package.json으로 설치를 확인할 수 있다.
상태관리 Redux + hooks
기본 구조 짜기
body구조
App 구조
Redux
설치하기
react-redux 상태관리 라이브러리를 다운 받자.
상태관리 - 상태 생성
function 내부에 상태를 명시해야된다.
최초 상태를 명
const 는 불변이긴 하지만, 값을 들고 있는 것이 아니라, 주소를 가지고 있다.
그래서 주소가 바뀌지 않는다고 기억하는 것이 좋다.
그래서 1,2,3,4 이렇게 4가 추가가 가능하다.
구조분해할당
arr을 const로 선언하고,
const [f,s,t] = arr
로 하면 각 f,s,t가 arr번지와 맞춰서 할당이 된다.
이것이 구조분해 할당
0102222 는 number로 할당이 되고,
setNumber는 상태 변경함수가 된다.
set은 문법이다.
여기에 함수를 바인딩 하면 된다.
changeNumber 함수를 바인딩 할려면 이렇게 이름을 넣어준다.
그럼면 이렇게 바인딩 해야되는거 아니냐 생각할 수 있지만,
이건 바인딩이 아니라 실행하는 행위를 한다.
그래서 changeNumber 함수안에
setNumber 상태변경 함수를 만들고 변경될 값을 매개변수로 넣어주면 된다.
전체 코드
import React, { useState } from "react";
function Body() {
const [number, setNumber] = useState("0102222");
const changeNumber = () => {
setNumber("0103333");
};
return (
<div>
<div>이름 : 홍길동</div>
<div>전화번호 : {number}</div>
<button onClick={changeNumber}>전화번호변경</button>
</div>
);
}
export default Body;+
Java
복사
Object로 던지기
Body2 로 예제를 하나더 만들어보자.
Object는 이렇게 선언해주면 된다.
결국 이자리에 들어가는 것은 함수의 레퍼런스 주소이다.
이렇게 걸면 실행함수가 바인딩 되고 괄호에 매개변수도 넣을 수 있다.
이렇게 Object를 그대로 유지하고 싶은거 유지하고 변경하고 싶은거만 변경할려면
이렇게 선언하면된다.
props
컴포넌트 이름 옆에 매개변수를 이렇게 적을 수가 있고, 이 속성들은 props라는 매개변수 객체로 전달된다.
이렇게 props를 매개변수에 명시를 해줘야 된다.
이렇게 props. 점을 찍으면서 변수를 가져올 수 있다. 하지만 구조분해 할당 문법을 사용하면
이 구조분해할당 문법이 있으면
쩜쩜 찍으면서 불러오지 않고 바로 변수를 바인딩 할 수 있다.
객체니까, 중괄호로 바꾸면 된다.
import React, { useState } from "react";
let props = {
username: "Ssar",
password: "1234",
};
function Body2(props) {
let { username, password } = props;
const [user, setUser] = useState({
name: "홍길동",
number: "0102222",
});
const changeUser = () => {
setUser({ name: "임꺽정", number: "0105555" });
};
return (
<div>
<div>
유저네임 : {username} 패스워드 : {password}
</div>
<div>이름 : {user.name}</div>
<div>전화번호 : {user.number}</div>
<button onClick={() => changeUser()}>유저정보변경</button>
</div>
);
}
export default Body2;
Java
복사
통신하기
Post.js 생성
기본 구조 생성
posts/3 찍으면 3번 포스트가 로드된다.
get 요청 하는 법
contentType 헤더가 필요없음
겟 요청이라면 이렇게도 요청이 가능하다.
위의 문법은 동기로 실행되기 떄문에,
8번 라인에서 통신이 완료될 때까지 기다린다.
사용자 입장에서는 뻗어있게 되는거지
async 를 걸어주면 함주 자체는 비동기로 스케줄링되고, 빠져나온다.
await가 걸려있으면 cpu는 할게 없을때 다시 돌아간다. (작업 목록표 같은거)
await가 안걸려있으면 response에는 null이 들어가게 된다.
initState 같은 것,
함수가 실행될 때 최초에 한 번 실행이된다.
useEffect는 최초에 한번 실행시키기 위한 것이고,
리턴이 될 때마다 다시 그리지 않기 위한 것.
중괄호에서는 값을 받아오면, div를 다시 그리지 않고 값만 바꾸게 되고,
대괄호에서는 내가 정말 다시그리고 싶을때, 원하는 값을 넣으면 된다.
api 문서로 json 데이터 형식을 파악한다.
이렇게 통신을 받을 수 잇는 그릇을 초기화 해놓는다.
리턴 값도 세팅이 되어있어야 하겠지
전체 코드
import React, { useEffect, useState } from "react";
function Post(props) {
const [post, setPost] = useState({
userId: undefined,
id: undefined,
title: "",
body: "",
});
async function download() {
let response = await fetch("https://jsonplaceholder.typicode.com/posts/3");
}
// 한번만 실행하겠다. 그림그려질때!!
useEffect(() => {
download();
}, []);
return (
<div>
userId: {post.userId}, id: {post.id}, title: {post.title} <br />
body: {post.body}
</div>
);
}
export default Post;
Java
복사
이안에 데이터가 들어가있다.
이 useEffect를 쓰지 않으면 무한 다운로드 하게된다.
페이지가 바뀌는 상황에서는 다시그려야 되는데,
페이지가 바뀔 때 useEffect를 실행 시키고 싶다고 느낄때,
대괄호 안에 page를 넣어주면 된다.
import React, { useEffect, useState } from "react";
function Post(props) {
const [post, setPost] = useState({
userId: undefined,
id: undefined,
title: "",
body: "",
});
async function download() {
let response = await fetch("https://jsonplaceholder.typicode.com/posts/3");
}
// 한번만 실행하겠다. 그림그려질때!!
useEffect(() => {
download();
}, []);
return (
<div>
userId: {post.userId}, id: {post.id}, title: {post.title} <br />
body: {post.body}
</div>
);
}
export default Post;
Java
복사