230614 리액트
리액트란 : (노드js 기반)
프레임워크 (독립적인 문법체계를 가짐 )
라이브러리 (기존에 있는 프로그래밍언어를 기반으로 효율적으로 사용하도록 템플릿을 공유하는 방식) *제이쿼리
리액트의 특장점
- 컴포넌트화 가능 ( 각각의 구조를 독립적인 모듈로 인식, 사용)
> 버그, 디버깅 효율
> 프로젝트가 커질수록 장점이 부각됨
- 선언형 프로그래밍 언어 (<->명령형)
*명령형 : 병렬로 프로세스 진행 / 기존문법체계 사용
*선언형 : 두괄식 프로세스 진행 (순서를 기다리지 않음 개발자나름의 커스터마이징된 문법 사용 가능)
- 가상 DOM 사용
리액트 세팅 (npx : node package execute 노드패키지의 최신버전을 가지고와서 실행)
터미널 : npx create-react-app react_01 --template typescript 입력
(폴더생성) (타입스크립트 환경세팅)
--template typescript 를 입력하지 않으면 기본 JS 환경에서 작업하도록 세팅된다.
터미널 : npx create-react-app . --template typescrip (루트폴더에 진행)
리액트에서 랜더, 렌더링이란? 웹브라우저화면에 출력하는 것을 의미
리액트의 핵심
JSX : Javascript & XML
State : 상태 -이벤트작동 전, 후 조건에 맞게 실행문 작성 가능 *****
Props : Propertys의 약자 (약어) 속성.. - 컴포넌트의 속성 전달 가능
JSX / TSX : 최상단에 부모요소가 존재해야함 무조건..! / 닫는 태그가 존재해야 한다. /
만약 동일 형제간 태그가 복수인 경우..무조건! 감싸안는 부모요소가 있어야한다.
<React.Fragment> </React.Fragment> : 부모태그를 마땅히 쓰고싶지 않을때..최상위에 써준다.. (단 import React 해줘야함)
< ></> : 이 방법도 사용함.
리액트는 출력문에서 조건문 랜더링이 가능하다.
삼항조건연산자 사용
if 문 사용
인라인 스타일 적용 가능 (객체 타입으로 적용해야한다)
리액트 구동에서 나갈때
터미널에서 컨트롤 + C
리액트에서 CSS스타일 적용 방법 : 변수 선언 - 객체타입으로 값을 할당 - 해당 값을 객체.프로퍼티 값을 가져오듯이 사용하면 가능
리액트에서는 출력문에 연산식을 직접입력하여 바로 출력가능
import './App.css';
import MyHeader from './Component/Myheader';
function App() {
let name = "민혜린";
const style = {
App: {
backgroundColor: "black"
},
h2: {
color: "#fff"
},
bold_text: {
color: "green"
}
};
const number = 5;
return (
<div style={style.App}>
<MyHeader />
<h2 style={style.h2}>안녕 리액트 {name}</h2>;
<b style={style.bold_text}>
{number}는 : {number % 2 === 0 ? "짝수" : "홀수"}
</b>
</div>
);
}
외부 스타일 시트 사용시에는 import "경로값" 입력후, className으로 클래스 잡아준다.
css파일의 경우 별도의 export 는 필요하지 않다.
+ - 버튼을 누르면 숫자가 증가하고, 증감한다.
import React, { useState } from "react";
const Counter = () => {
const [count, setCount] = useState(0);
const onIncrease = () => {
setCount(count + 1);
};
const onDecrease = () => {
setCount(count - 1);
};
return (
<div>
<h2>{count}</h2>
<button onClick={onIncrease}>+</button>
<button onClick={onDecrease}>-</button>
</div>
)
}
export default Counter;이 컴포넌트를 App.tsx에 넣어준다.
import React from 'react';
import logo from './logo.svg';
import './App.css';
import MyHeader from './Component/Myheader';
import Counter from './Component/Counter';
function App() {
let name = "민혜린";
const style = {
App: {
backgroundColor: "black"
},
h2: {
color: "#fff"
},
bold_text: {
color: "green"
}
};
const number = 5;
return (
<div>
<MyHeader />
<Counter />
</div>
);
}
export default App;- 리액트에서 컴포넌트를 생성할때 파일명 및 함수이름은 가급적 대문자로 시작한다 (리액트 세계관 통상적인 관념)
- 리액트 컴포넌트에서 원시타입중 문자,숫자는 화면에 렌더링가능, 불리언타입은 직접 랜더링 불가하다. (하고싶다면 형태변환을통해서만 가능)
컴포넌트에도 부모자식 관계가 존재한다.
컴포넌트 사이에 속성값을 전달하고자 할때 Props 라는 매개변수를 활용한다.
Props 매개변수 는 부모 -> 자식 으로만 보낼 수있다.
컴포넌트에서 또 다른 컴포넌트로 Props 로 전달할때 1개이상 보낼 수 있습니다.
매번 Props로 보내고자 하는 변경된다면 매번 값을 재 수정해야할까? -구조분해할당 가능
여러개의 props를 줄때 줄코딩을 해야하는가? - 객체타입
받는 자식 요소에 넣어주면 기본적으로 오류를 방지할 수 있다.
리액트로 이벤트 설정하기
import "./Body.css";
function Body() {
function handleOnClick(e: React.MouseEvent<HTMLButtonElement>) {
console.log(e.currentTarget.name);
}
return (
<div>
<button name="A버튼" onClick={handleOnClick}>A버튼</button>
<button name="B버튼" onClick={handleOnClick}>B버튼</button>
</div>
)
}
export default Body;const [state:초기값, setCount: 초기값을 설정하는 함수] = useState( );
import { useState } from "react";
import "./Body.css";
function Body() {
const [text, setText] = useState("");
const handleOnchange = (e: React.ChangeEvent<HTMLInputElement>) => {
setText(e.target.value);
};
return (
<div>
<input onChange={handleOnchange} />
<h3>{text}</h3>
</div>
)
}
export default Body;
import { useState } from "react";
import "./Body.css";
function Body() {
const [date, setDate] = useState("");
const handleOnChange = (e: React.ChangeEvent<HTMLInputElement>) => {
console.log("변경된날짜: ", e.target.value);
setDate(e.target.value)
}
return (
<div>
<input type="date" value={date} onChange={handleOnChange}/>
<div>변경된 날짜: {date}</div>
</div>
)
}
export default Body;
import { useState } from "react";
import "./Body.css";
function Body() {
const [option, setOption] = useState("");
const handleOnchange = (e: React.ChangeEvent<HTMLSelectElement>) => {
console.log("변경된값:" , e.target.value);
setOption(e.target.value);
}
return (
<div>
<select value={option} onChange={handleOnchange}>
<option key={"1번"}>1번</option>
<option key={"2번"}>2번</option>
<option key={"3번"}>3번</option>
</select>
</div>
)
}
export default Body;
import { useState } from "react";
import "./Body.css";
function Body() {
const [name, setName] = useState("");
const [gender, setGender] = useState("");
const [birth, setBirth] = useState("");
const [bio, setBio] = useState("");
const onChangeName = (e: React.ChangeEvent<HTMLInputElement>) => {
setName(e.target.value)
}
const onChangeGender = (e: React.ChangeEvent<HTMLSelectElement>) => {
setGender(e.target.value)
}
const onChangeBirth = (e: React.ChangeEvent<HTMLInputElement>) => {
setBirth(e.target.value)
}
const onChangeBio = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
setBio(e.target.value)
}
return (
<div>
<div>
<input type="text" value={name} placeholder="이름" onChange={onChangeName} />
</div>
<div>
<select value={gender} onChange={onChangeGender}>
<option key={""}></option>
<option key={"남성"}>남성</option>
<option key={"여성"}>여성</option>
</select>
</div>
<div>
<input type="date" value={birth} onChange={onChangeBirth} />
</div>
<div>
<textarea value={bio} onChange={onChangeBio} />
</div>
<div>{name}, {gender}, {birth}, {bio}</div>
</div>
)
}
export default Body;
import { useState } from "react";
import "./Body.css";
interface numTake {
number: number;
}
function Viewer({number}:numTake) {
return <div>{number % 2 === 0 ? <h3>짝수</h3> : <h3>홀수</h3>}</div>
}
function Body() {
const [number, setNumber] = useState(0);
const onIncrease = () => {
setNumber(number + 1);
}
const onDecrease = () => {
setNumber(number - 1);
}
return (
<div>
<h2>{number}</h2>
<Viewer number = {number}/>
<div>
<button onClick={onDecrease}>-</button>
<button onClick={onIncrease}>+</button>
</div>
</div>
)
}
export default Body;useState( ) **
Props ***의 사용방법 숙지하기.
-> 매개변수는 객체타입으로 들어온다.