출처 https://hellominchan.tistory.com/99
1. export 와 export default 의 차이점
export의 이유?(다른 파일에서 해당 코드(함수, 변수, 컴포넌 트,...)를 이용해야 할 경우에)
export를 할 때는 반드시 {} 안쪽에다가 export할
함수나 변수나 컴포넌트 들을 콤마로 연결하면 된다
ex)
export {a, b, c};
import의 이유? 다른 파일에서 export된 코드를 사용할 경우에
import 할 때는 반드시 {}를 써서 import를 해야 하며
export 된 대상 중 사용하고싶은 요소만 중괄호
안쪽에 콤마로 연결해서 받아오면 된다
ex)
import {a, c} from '경로';export default ?
기본값으로 내보내겠다
한개만 기본값으로 설정할 수 있음
{}를 사용하지 않고 내보내기가 가능
ex)
export default a;d01export.js
let a = 10;
function tmp(){
return 'April';
}
function Test(){
return(
<>
<h1>Test컴포넌트</h1>
<p>Test컴포넌트를 만들었습니다</p>
</>
);
}
function Test2(){
return(
<h1>default로 export한 컴포넌트</h1>
);
}
// 다른 파일에서 함수, 변수, 컴포넌트를 사용할
// 수 있도록 export 하기
export {a, tmp, Test};
export default Test2;import
중괄호를 사용하지 않고 import 할 수 있으며
export된 이름하고 다른 이름으로 import 할수 있다
ex)
import www from '경로';d02import
import {a} from './d01export';
javaScript 기능
객체를 쉽게 만들 수 있는 방법
{키:value, 키:value}
{키:변수, 키:변수}
만약 설정한 키값과 value로 설정하려 하는
변수의 이름이 서로 같다면
{변수, 변수}
이런식으로 축약해서 만들 수 있다
let a = 10;
let b = '홍길동';
let target = {a, b};
target은?? 객체
target안에 있는 key
a
b
target.a
10
target.b
'홍길동'
구조분해 할당
구조화되어있는 데이터
(객체, 배열)를 분해하여
각각의 변수에 할당하겠다
{
title:'대모험',
page:20,
price:3500,
writer:'김철수',
issudedAt: '2020-01-01',
like:36,
age:20
}
여러개의 값이 저장되어있는 객체 속에서
변수에다가 값을 저장하고 싶을때
변수 like에는 36을
변수 writer에는 '김철수'를 할당하고 싶다
tmp = {
title:'대모험',
page:20,
price:3500,
writer:'김철수',
issudedAt: '2020-01-01',
like:36,
age:20
}
let writer = tmp.writer;
let like = tmp.like;
let {like, writer} = tmp;
console.log(writer )
console.log(like)
배열 구조분해할당
let ar = [10, 20, 30, 40, 50, 60, 70];
let a = ar[0]
let b = ar[1]
let c = ar[2]
let [a, b, c] = ar;
2. 리액트의 css 적용 방법
1. css 파일
css파일을 한 개 만든다
해당 css 파일을 사용하고 싶은 js 파일에서
import를 한다
모든 컴포넌트에 영향을 미친다
(html 파일이 하나, 그속에 영향을 미치는 대상은 전체)
d04cssfile.js
import './d05cssfile.css';
function CssFile(){
return(
<>
<h1>css파일을 따로 만들어서 컴포넌트에 적용시키기</h1>
<p>
css파일을 만들고 해당 경로를 사용하고자 하는
js 안에서 import 해주면 된다
</p>
</>
);
}
export default CssFile;d05cssfile.css
h1{
font-size: 50px;
}
p{
color: blue;
}2. html안에서 style태그
리액트에서 사용 XXX
3. 인라인
html과 동일한 이름으로 만들어진 jsx(p, h1....)
에 style 속성에다 적용시키고자 하는 css 스타일을
자바스크립트 객체로 만들어서 대입한다
이때 css 속성 이름이 객체의 key되고,
css 속성 값이 객체의 value가 되는데,
value는 반드시 문자열로 작성을 해야하며,
key는 특수문자 사용이 안되기에 카멜표기법으로 변경하여 적용
보통 공통적으로 모든 페이지에 대해서 적용되어야 하는 css
(전역 css, global css)는 css 파일로 만들고
나머지는 각각의 컴포넌트 별로 css를 만든다
d03inline.js
function Inline(){
return(
<>
<h1 >인라인 스타일 적용방법</h1>
<p style={
{
color:'red',
marginLeft:'20px',
border : '1px solid black'
}
}>
리액트의 jsx 중 html 태그와 이름이 똑같이 만들어져있는
jsx에서 inline 스타일을 입히기 위해서는
style 속성에 적용시킬 css속성들을 객체로 대입
</p>
</>
);
}
export default Inline;
4. 컴포넌트 별로 스타일 주기
html X --> js만 사용하면 되네?
css파일도 js로 만들면 안되나?
css in js
css를 js 파일로 만들자
컴포넌트 단위로 css를 만들자
--> 내가 만든 컴포넌트를 남이 사용할수 있음 + 내가 다른
프로젝트 할때도 갖다 쓸수있다
library 설치
emotion
styled-components
설치할 위치(내가 설치할 프로젝트 폴더 안에서 설치)
npm install 라이브러리이름
d06emotion.js
import styled from '@emotion/styled';
function EmotionComponent(){
return(
<Box>
<Title>이모션을 활용한 컴포넌트</Title>
<p>이모션 컴포넌트입니다</p>
</Box>
);
}
let Box = styled.div`
background-color : silver ;
width:800px;
`;
let Title = styled.h1`
margin:0;
font-size:36px;
`;
export default EmotionComponent;리액트에서 페이지 이동?
--> next.js
