Frontend Authorization Routes
노마드 코더의 본격적인 프론트엔드 코딩 시작 시간입니다. Authoriztion Routes를 구성하는 편입니다. 지금부터는 코드를 올리지는 않으며 제 개인적으로 생각했을 때 설명이 필요하다 싶은 부분을 중점적으로 올리겠습니다.
Hooks
React 버전 16.8에서 새로 추가된 Hook은 Class 문법을 작성할 필요 없이 여러 상태 값과 React의 기능을 사용할 수 있게 되었습니다.
React에서 수만개의 컴포넌트들을 작성하고 유지하는데 발현되었던 다양한 문제를 해결하기 위해서 Hook이 나왔습니다. Class로 컴포넌트를 작성하였을 때 render props 또는 여러 컴포넌트와 같은 패턴을 만들어야 합니다. 이러한 패턴은 컴포넌트를 재구성해야하며 코드 추적을 어렵게 하여 에러가 났을 때 디버깅하기 어렵게 만든다는 단점이 있었습니다.
Hooks를 사용하면 컴포넌트로부터 상태 관련 로직을 추상화할 수 있고, Hook은 독립적으로 사용되므로 재상용이 편리합니다. 많은 컴포넌트 사이에서 Hook을 공유하기 쉬워집니다.
Hook은 porps, state, context, refs, lifecycle 등과 같은 React의 개념에 좀 더 직관적인 API를 제공한다고 합니다.
Hooks의 사용 법은 아래와 같습니다.
const Example = (props) => {
// 여기서 Hook을 사용할 수 있습니다!
return <div />;
}
function Example(props) {
// 여기서 Hook을 사용할 수 있습니다!
return <div />;
}
useState
useState가 Hook입니다. useState는 “state 변수”를 선언할 수 있습니다. useState는 클래스 컴포넌트의 this.state가 제공하는 기능이 똑같습니다. 일반 변수는 함수가 끝날 때 사라지지만, state 변수는 React에 의해 사라지지 않습니다. 이러한 기능 덕분에 우리는
class Example extends React.Component {
constructor(props) {
super(props);
this.state = {
action : 0
};
}
에서 constuctor와 props를 통해 초기값을 설정하지 않아도 되는 것입니다. Hooks를 쓰지 않았으면 노마드 코더가 작성한 action은 위의 클래스 문법처럼 구성해주어야 해서 코드가 복잡하고 지저분해집니다.
import React, { useState } from 'react';
function Example() {
// 새로운 state 변수를 선언하고, 아무 이름으로 변수명을 지정해도 됩니다.
// 다만 앞부분의 함수 변수명 뒤에 set을 붙이는 것이 의미 전달에는 더 좋습니다.
const [action, setAction] = useState(0);
이 때 useState(0)에서 0은 함수의 count 변수 안에 초기값을 전달해줍니다.
좀 더 자세한 사항은 React문서 - Using the State Hook에서 보실 수 있습니다.
styled-components
노마드 코더의 CSS 스타일 작성 방식은 스크린 페이지 아래에
const styles = StyleSheet.create({
container: {
flex: 1,
alignItems: 'center',
justifyContent: 'center',
backgroundColor: 'white',
},
thumbnail: {
marginHorizontal: 5,
borderColor: 'pink',
borderWidth: 2
}
});
이렇게 지정해서 사용하지 않습니다. 보통 아래부분에 이런식으로 작성하고 <Container style={styles.container}>으로 불러와 사용하는 것이었는데 이러한 구문에는 자바 스크립트의 여러 문제점인 호이스팅 현상 때문에 사용이 될 때도 있고 사용이 되지 않을 때도 있는 예측 불가능성을 가질 때가 있었습니다. 하여 스타일을 import 구문 하단에 사용하여 아래에 함수를 추가하는 방식으로 바뀌는 등의 여러 개발자들이 있었으나 styled-components가 나오면서 styled 객체 안에 styed-componets를 import 해주고 변수에 추가하여 사용하거나 Component처럼 사용할 수 있게 되었습니다.
이렇게 styled.divcss스타일을 넣습니다. 방식으로 Box 변수에 Css를 적용할 수 있습니다.
const Box = styled.div`
${props => props.theme.whiteBox}
border-radius:0px;
width: 350px;
width: 100%;
max-width: 350px;
`;
CSS를 초기화 하고 싶을 때는 styled-components의 createGlobalStyle 메소드를 사용하여 CSS를 초기화할 수 있습니다.
const GlobalStyle = createGlobalStyle`
body {
padding: 0;
margin: 0;
}
`;
이상으로 노마드 코더가 생략한 기본 개념을 정리하였습니다.
Leave a comment