React 1일차.
2021. 12. 22. 09:05ㆍFront End
- 설치 순서.
- node.js 설치
- 터미널 실행 후 설치 폴더까지 이동
- npx create-react-app ***
- npm install react-redux
- npm install react-router-dom
- npm install --save styled-components
- npm install react-bootstrap bootstrap
- npm install --save-dev --save-exact prettier
- .prettierrc 파일 생성후 설정값 입력
jsx문법
- return 시에 하나의 Dom만 리턴할 수 있다.
- 변수 선언은 let 혹은 const로만 해야함.(let = 변수, const = 상수)
- if 사용 불가능 X -> 삼항연산자 (조건 ? 값(true) : 값(false)) ex) { a === 10 ? '10입니다' : '10이 아닙니다.'}
- 조건부 렌더링 (조건 && 값(true)) ex) {b === 20 && '20입니다.}
- css 디자인
- -내부에 적는 방법. (비추천)
- -외부 파일에 적는 방법.(classname 사용)
- -라이브러리 사용(bootstrap, componnent-styled)
- concat
- 배열에 추가 ex a2.concat(4)
- concat은 불변함수 push는 가변함수
- filter
- 걸러내는 역할
- ex) a3.filter((n) => {return 3 !=1}); // boolean 을 return 받는다. -> true만 걸러낸다.
- 삭제할때 많이 사용
- map
- 반복문
- const b5 = a5.mpa((n) => n);
- 전개 연산자와 비슷해보이지만 map 연산자는 루프 도는 도중 가공이 가능.
- slice
- 잘라내는 역할
- a4.slice(시작점,종료점)
- spread(전개) 연산자
- ex) const a = [1, 2, 3]; const b = [...a]; b.push(4);
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport">
<title>Title</title>
</head>
<body>
<script>
const a = [1, 2, 3];
const b = [...a];
console.log("1.=================스프레드 연산자")
b.push(4);
console.log('a의 값은 ${a}')
console.log('b의 값은 ${a}')
const c = [...a, 4];
console.log('c의 값은 ${c}')
console.log("2.=================추가하기")
const a2 = [1, 2, 3];
const b2 = a2.concat(4);
console.log('a2의 값은 ${a2}')
console.log('b2의 값은 ${b2}')
console.log("2.==================걸러내기")
const a3 = [1, 2, 3];
const b3 = a3.filter((n) => {
return n != 1
});
console.log('b3의 값은 ${b3}')
console.log("2.==================잘라내기");
const a4 = [1, 2, 3];
const b4 = a4.slice(0, 2);
console.log('b4의 값은 ${b4}')
const c4 = [a4.slice(0, 2)];
console.log('c4의 값은 ${c4}')
console.log("2.==================반복하기");
const a5 = [1, 2, 3];
// a5.forEach((i) => {
// console.log(i)
// });
const b5 = a5.map((n) => n); // const b5 = [...a5];
console.log(b5);
</script>
</body>
</html>
'Front End' 카테고리의 다른 글
| react-router-dom 기본 사용 (0) | 2021.12.22 |
|---|---|
| React 기본 문법, styled-component 사용 (0) | 2021.12.22 |
| jQuery (0) | 2021.09.23 |
| JavaScript 2. (0) | 2021.09.23 |
| Java Script 실습 예제 (0) | 2021.09.23 |