react project 구조
돔트리돔트리~
static 폴더의 index.html이 기본
- bundle
참고) 파일 확장자 표시 설정
yarn build
- yarn build 명령어로 build 폴더가 생김
- 이클립스 Dynamic web PJ 의 webapp폴더에 붙여넣고 루트컨텍스트 수정
- build 폴더는...
src 폴더의 index.js
이거는 왜 캡쳐했는지 모르겠음..
리액트 컴포넌트 종류
- 클래스형 컴포넌트
안에 반드시 render 함수가 있어야함.
출력할 구문을 render 함수 안에서 return - 함수형 컴포넌트
출력할 구문 return에 쓰면 됨.
리액트에서 출력하는 컴포넌트 형태는 태그형태이다.
함수형
function App() { return ( <h1>안녕하세요 ~~~</h1> ) }
규칙들
1) return 에 쓰는 태그는 최상위 태그 하나만 가능
h1 aaa h1
h2 bbb h2 이렇게 쓰면 안되고
div 로 위 두 줄을 씌워줘야 함
=> 상위 버전 부터는 Fragment라는 태그로 최상위 태그를 쓸 수 있게 해줌.
=> 근데 빈태그도 가능 (<></>이렇게)
2) 라인이 한줄일 경우
return <h1안녕하세요 ~~~h1> 이렇게 쓸 수 있음
태그를 문자열로 인식하기 때문에 큰따움표 안써줘도 됨.
3) 라인이 여러줄일 경우 위처럼 괄호에다가 씀.
출력 : if/삼항/논리 연산
if/삼항연산자 보다 논리연산자가 더 빠르다
falsy한 값들
false, null, undefined, '', 0
style 적용
1) 변수로 사용할 때
const style = {
backgroundColor : "tomato",
color:"aqua",
fontStize: '48px'
}div태그에 적용하는 법 :
<div style={style}> 2) map형식으로 직접 써줄 때
div태그에 바로 작성
<div style={{backgroundColor : "blue",
color:"aqua",
fontStize: '48px'}}>3) App.css에 작성
className으로 써줌
<div className = "react">기타
1) input태그는 꼭 닫아주자
<input name='uid'></input>
// 또는
<input name='uid'/>2) 자바스크립트의 주석
- // 라인주석
- / ~ / 블럭주석
둘 다 중괄호 안에 써준다 . - return 문 최상위 태그 안에서는 블록 필수
최상위 태그 밖에서는 블록 지정 필요 없다.
3) 프리티어 설정 커스텀 하려면 작업폴더에 .prettierrc라는 파일 만들어줘야함
"singleQuite" :true, // 작은따옴표만 쓰겠다. (큰따옴표 안씀 )
"semi":true, // 세미콜른을 항상 사용 하겠다.
"useTabs":false, // 탭안쓴다
"tabWidth":2 // 탭크기를 2칸으로 고정하겠다. - .pretteirrc 파일 적용하기
ctrl+ ,
3장
클래스형 만들어보기
멤버변수는 this. 으로
rcc 단축키로 클래스형 컴포넌트 생성
rsf 단축키로 함수형 컴포넌트 생성
- 람다식
컴포넌트 모으기
src 아래에 comp폴더를 만들고 MyComponent1/2/3을 옮겨준다.
그럼 import 할때 경로가
아래 처럼 추가된다.
한꺼번에 import도 가능하다.
import { MyComponent, MyComponent2, MyComponent3 } from "./comp";
Component Export 하기
- 함수형 컴포넌트에서는 export default를 함수앞에 명시할 수 있다.
import React from "react";
export default function MyComponent2() {
return <div>나의 두번째 컴포넌트</div>;
}
//export default MyComponent2;
별칭으로 컴포넌트를 export 하기
export 할 때 as 이하에 정해준 alias 로 import 해야함.
props
- props는 읽기전용! props 데이터는 변경하는것이 아니다. model로 가서 부모 데이터를 변경해야 함 (member 변수)
구조분해할당
propTypes
-
MyComponent2 하단
-
문자열로 보내면 개발자 도구에서 에러 안남
-
숫자로 보내면 개발자 도구에서만 조용히 warning 뜸
state
변경 전 코드
import React, { Component } from 'react';
class Counter extends Component {
constructor(props) {
super(props);
this.number = props.number; // 이 값은 객체가 생성됐을 때 전달이 됨.
}
number = 0; // props를 변경해주고 싶어서 member 변수를 만들음.
// 이 멤버변수 number는 Counter 꺼임.
render() {
return (
<div>
<h1>{this.number}</h1>
<button
onClick={() => {
console.log('버튼클릭..', this.props);
this.number++;
}}
>
+1 증가
</button>
</div>
);
}
}
export default Counter;
변경 후 코드
import React, { Component } from 'react';
class Counter extends Component {
constructor(props) {
super(props);
this.state = {
number: props.number, // 이 값은 객체가 생성됐을 때 전달이 됨.
};
}
number = 0; // props를 변경해주고 싶어서 member 변수를 만들음.
// 이 멤버변수 number는 Counter 꺼임.
render() {
const { number } = this.state;
return (
<div>
<h1>{number}</h1>
<button
onClick={() => {
console.log('버튼클릭 값증가 전..', this.number);
//this.number++;
this.setState({ number: number + 1 }); // 비동기로 내부적으로 render() 함수 호출
console.log('버튼클릭..', number);
}}
>
+1 증가
</button>
</div>
);
}
}
export default Counter;
