TIL
프론트 엔드 1주 2일차 - React의 useState 그리고 Import와 Export
버밀이
2023. 3. 14. 14:36
1. React의 장점
1. 태그에 class와 id 등을 쓸 필요가 없어지므로 코드가 간결해진다.
2. 태그의 이름을 작성자가 정할 수 있어서 가독성이 높아진다.
3. 재사용이 용이하다 -> 왜냐하면 UI 또는 기능을 컴포넌트 단위로 재사용이 가능하게 만들어 반복적으로 사용이 가능게 만들 수 있기 때문이다.
2. React와 다른 자바스크립트 도구(vue, angular 등)
1. 가장 많은 사용자들을 보유해서 배울 자료가 많다.
2. 질문 검색 용이
3. 취업, 이직 쉬움
4. 리액트 하나로 웹, 앱(크로스 플랫폼 = 안드로이드, 애플의 60% 가까운 코드 유사성을 가짐), pc앱(slack, discord)
모두 커버 가능
3. React의 새로운 변수 state
React에는 함수형 컴포넌트와 클래스형 컴포넌트가 존재한다. 클래스형 컴포넌트의 모든 기능을 함수형 컴포넌트로 구현하는데 무리가 있어 이를 해결하기 위해서 Hooks라는 도구를 사용하게 된다. Hooks는 대표적으로 useState, useEffect 등이 있다.
그중 useState는 변수를 만들어주는 Hooks로 html 태그를 가져오는데 getElementByID등을 사용하지 않아도 가능하다는 장점이 있다 아래의 코드를 보면 이해가 더욱 쉬울 것이다.
// state로 count 예제 실험해보기
import { useState } from 'react'
function New() {
const [count, setCount] = useState(0) // state로 컴포넌트 변수 만들기
function handleClick() {
setCount(count + 1) // 갯수가 증가하면서, 화면에 정상적으로 반영됨
}
return (
<div>
<h1>{count}</h1>
<button onClick={handleClick}>state를 사용하여 count 증가</button>
</div>
)
}
export default New
getElementById 등을 사용하지 않아서 더욱 간결하고 가독성도 높아진 것을 확인할 수 있다. 또한 State를 쓰지 않고 return문 위에 let, const 등으로 변수를 설정해 줘도 function가 동작해도 변수 값이 바뀌지 않는다. 이 때문에 State를 React에서 사용하는 것이다.
4. Import와 Export
1. import : export를 통해서 나와진 변수, 함수 클래스들을 사용할 수 있도록 가져온다.
2. export : 변수, 함수, 클래스 앞에 분어서 모듈의 기능을 외부에서 사용할 수 있도록 한다.
사용 예시
export를 이용한 css(emotion)
import styled from "@emotion/styled";
export const TopHead = styled.div`
display: flex;
justify-content: flex-end;
margin-right: 10%;
padding-top: 60px;
margin-bottom: 30px;
`;
export const BottomHead = styled.div`
display: flex;
justify-content: space-between;
margin-right: 60px;
align-items: center;
margin-bottom: 50px;
`;
export const My = styled.span`
font-size: 40px;
font-weight: 700;
margin-left: 50px;
`;
export const Profile = styled.div`
display: flex;
justify-content: space-between;
align-items: center;
`;
export const Name = styled.span`
font-size: 24px;
font-weight: 700;
margin-left: 20px;
margin-right: 10px;
`;
export const BigHead = styled.div`
border-bottom: solid 2px #cacaca;
`;
export const TopMenu = styled.div`
display: flex;
flex-direction: row;
justify-content: space-around;
margin-right: 80px;
padding-bottom: 45px;
`;
export const TopMenuEle = styled.div`
font-size: 24px;
font-weight: 700;
color: #cacaca;
`;
export const TopMenuSelect = styled.div`
font-size: 24px;
font-weight: 700;
color: #ff1b6d;
border-bottom: solid 2px #ff1b6d;
`;
export const BodyMenu = styled.div`
padding-top: 2%;
display: flex;
flex-direction: column;
margin-left: 25px;
`;
export const Question = styled.div`
font-size: 18px;
font-weight: 400;
color: #adadad;
margin-bottom: 15px;
`;
export const QuestionB = styled.div`
font-size: 24px;
font-weight: 400;
`;
export const QuestionDiv = styled.div`
display: flex;
justify-content: space-between;
padding-right: 30px;
align-item: center;
margin-bottom: 30px;
`;
export const BottomMenu = styled.div`
display: flex;
justify-content: space-around;
padding-top: 1.5%;
border-top: solid 1px #dcdcdc;
margin-top: 5%;
`;
export const BottomMenuEle = styled.div`
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
`;
export const BottomMenuImg = styled.img`
width: 40px;
height: 40px;
`;
export const BottomMenuString = styled.span`
font-size: 16px;
font-weight: 400;
color: #adadad;
`;
export const Vector = styled.img`
width: 32px;
height: 16px;
`;
export const All = styled.div`
background-color: #ffffff;
width: 640px;
height: 1095px;
`;
import해오는 코드
// import styled from "@emotion/styled";
import {
All,
TopHead,
BottomHead,
My,
Profile,
Name,
TopMenu,
TopMenuEle,
TopMenuSelect,
BodyMenu,
Question,
QuestionB,
QuestionDiv,
BigHead,
BottomMenu,
BottomMenuEle,
BottomMenuString,
BottomMenuImg,
Vector,
} from "../../styles/01-quiz";
export default function EmotionPage() {
return (
<All>
<BigHead>
<TopHead>
<img src="/search.png"></img>
</TopHead>
<BottomHead>
<My>마이</My>
<Profile>
<img src="/profile.png"></img> <Name>임정아</Name>{" "}
<img src="/right.png"></img>
</Profile>
</BottomHead>
<TopMenu>
<TopMenuEle>공지사항</TopMenuEle>
<TopMenuEle>이벤트</TopMenuEle>
<TopMenuSelect>FAQ</TopMenuSelect>
<TopMenuEle>Q&A</TopMenuEle>
</TopMenu>
</BigHead>
<BodyMenu>
<div>
<Question>Q.01</Question>
<QuestionDiv>
<QuestionB>리뷰 작성은 어떻게 하나요?</QuestionB>
<Vector src="/vector.png"></Vector>
</QuestionDiv>
</div>
<div>
<Question>Q.02</Question>
<QuestionDiv>
<QuestionB>리뷰 수정/삭제는 어떻게 하나요?</QuestionB>
<Vector src="/vector.png"></Vector>
</QuestionDiv>
</div>
<div>
<Question>Q.03</Question>
<QuestionDiv>
<QuestionB>아이디/비밀번호를 잊어버렸어요</QuestionB>
<Vector src="/vector.png"></Vector>
</QuestionDiv>
</div>
<div>
<Question>Q.04</Question>
<QuestionDiv>
<QuestionB>회원탈퇴를 하고싶어요.</QuestionB>
<Vector src="/vector.png"></Vector>
</QuestionDiv>
</div>
<div>
<Question>Q.05</Question>
<QuestionDiv>
<QuestionB>출발지 설정은 어떻게 하나요?</QuestionB>
<Vector src="/vector.png"></Vector>
</QuestionDiv>
</div>
<div>
<Question>Q.06</Question>
<QuestionDiv>
<QuestionB>비밀번호 변경하고 싶어요</QuestionB>
<Vector src="/vector.png"></Vector>
</QuestionDiv>
</div>
</BodyMenu>
<BottomMenu>
<BottomMenuEle>
<BottomMenuImg src="/home.png"></BottomMenuImg>
<BottomMenuString>홈</BottomMenuString>
</BottomMenuEle>
<BottomMenuEle>
<BottomMenuImg src="/navi.png"></BottomMenuImg>
<BottomMenuString>잇츠로드</BottomMenuString>
</BottomMenuEle>
<BottomMenuEle>
<BottomMenuImg src="/heart.png"></BottomMenuImg>
<BottomMenuString>마이찜</BottomMenuString>
</BottomMenuEle>
<BottomMenuEle>
<BottomMenuImg src="/my.png"></BottomMenuImg>
<BottomMenuString>마이</BottomMenuString>
</BottomMenuEle>
</BottomMenu>
</All>
);
}
결과 화면
5. 오늘의 코딩
