오늘 알게 된 사실
- nextj JS에 대해 공부했다.
Next는 코드스플리팅과 서버사이드렌더링을 지원해준다. 따라서 사용자와 데이터를 많이 주고 받는 페이지 또는 검색엔진에 노출이 되야 하는 쇼핑몰페이지를 만들 때 유용하다. 코드스플리팅을 통하여 모든 페이지의 정보를 받아오는 것이 아니라 현재 페이지의 정보만 주고 받을 수 있어 빠르게 화면을 보여 줄 수 있다.
Next 에서는 다른 링크로 이동할 때 react-router을 이용하는 것이 아니라 next에서 제공하는 Link를 이용한다. 사용할 때는 <Link href=”주소”><a>홈</a></Link> 과 같은 방식으로 작성한다.
Nextjs에서 head부분의 수정을 원할 경우 import Head from ‘next/head’를 통해서 head부분을 변경할 수 있다. Return 문안에 <Head></Head>컴포넌트를 만든 후 수정이 가능하다. <title>타이틀 이름</title>-
target="_blank" rel="noreferrer noopener"
타겟을 _blank로 했을 경우 보안상의 이슈를 해결하기 위해 위와 같이 rel을 추가해야 된다.
-ant design 이라는 프레임워크가 있다. 간단하게 css속성을 입힐 수 있다 모든 페이지에 antd를 적용 해야될 때 pages폴더안에 _app.js라는 파일을 만들어서 공통으로 사용해야 하는 것을 분리시 킬 수 있다.
Prop-types : Flow , TypeScript 등을 사용하지 않고 react의 내장된 타입확인 하는 기능. 컴포넌트의 props타입을 확인한다.
import PropTypes from 'prop-types'
import 'anttd/dist/antd.css'
const App = ({Component})=>{
return <Component />
}
App.protoType={
Component : PropTypes.elementType.isRequired
}
export default App
PropsTypes는 전달받은 데이터의 유효성을 검증하기 위해서 다양한 유효성 검사기를 내보낸다. Prop에 유효하지 않는 값이 전달 되었을 때 경고문이 콘솔에 보이게 된다.
MyComponent.propTypes = {
// prop가 특정 JS 형식임을 선언할 수 있습니다.
// 이것들은 기본적으로 모두 선택 사항입니다.
optionalArray: PropTypes.array,
optionalBool: PropTypes.bool,
optionalFunc: PropTypes.func,
optionalNumber: PropTypes.number,
optionalObject: PropTypes.object,
optionalString: PropTypes.string,
optionalSymbol: PropTypes.symbol,
// 랜더링 될 수 있는 것들은 다음과 같습니다.
// 숫자(numbers), 문자(strings), 엘리먼트(elements), 또는 이러한 타입들(types)을 포함하고 있는 배열(array) (혹은 배열의 fragment)
optionalNode: PropTypes.node,
// React 엘리먼트.
optionalElement: PropTypes.element,
// React 엘리먼트 타입 (ie. MyComponent)
optionalElementType: PropTypes.elementType,
// prop가 클래스의 인스턴스임을 선언할 수 있습니다.
// 이 경우 JS's instanceof 연산자를 사용합니다.
optionalMessage: PropTypes.instanceOf(Message),
// 열거형(enum)으로 처리하여 prop가 특정 값들로 제한되도록 할 수 있습니다.
optionalEnum: PropTypes.oneOf(['News', 'Photos']),
// 여러 종류중 하나의 종류가 될 수 있는 객체
optionalUnion: PropTypes.oneOfType([
PropTypes.string,
PropTypes.number,
PropTypes.instanceOf(Message)
]),
// 특정 타입의 행렬
optionalArrayOf: PropTypes.arrayOf(PropTypes.number),
// 특정 타입의 프로퍼티 값들을 갖는 객체
optionalObjectOf: PropTypes.objectOf(PropTypes.number),
// 특정 형태를 갖는 객체
optionalObjectWithShape: PropTypes.shape({
color: PropTypes.string,
fontSize: PropTypes.number
}),
}
defaultProps 프로퍼티를 할당하면서 props의 초기값을 설정 할 수 있다. Default props는 부모컴포넌트에 의해 명시되지 않았을 때 값을 갖도록 해줌.
App.defaultProps = {
name: 'ringco'
};
ant- design – 그리드를 나눌 때 24개의 칸을 나눈다.
Gutter – 컬럼사이의 간격
<Row gutter={8}>
<Col xs={24} md={6}> xs- 모바일 환경 576px 이하
왼쪽 md – 768px이상
</Col>
<Col xs={24} md={12}>
{children}
</Col>
<Col xs={24} md={6}>
오른쪽
</Col>
</Row>
Styled-components
컴포넌트에 스타일을 적용 시킬 때 아래와 같은 방식으로 스타일을 적용 시킬 경우 안에 있는 객체가 바뀐다고 react가 판단하여 아래의 자식 컴포넌트들이 계속 리렌더링이 일어나게된다.
<div style={{marginTop : 10}}>
따라서 styled-components를 이용해 불변성을 유지 시켜 줘야 한다.
사용법은 아래와 같다
const ComponentName= styled.div`
margin-top : 10px;
`
'JAVASCRIPT TIL' 카테고리의 다른 글
| TIL - 리덕스미들웨어 (Redux-Middleware) (0) | 2020.09.11 |
|---|---|
| TIL - Next.js Redux 연동하기 configStrore (0) | 2020.09.10 |
| 자바스크립트 - Array Methods (0) | 2020.07.01 |
| Javascript - Class (0) | 2019.08.13 |
댓글