5.1 React가 필요한 이유
산탄총 수술 - 중복 코드 문제
(컴포넌트화 방식)
ㄴ 컴포넌트로 코딩하면 일단 작성할게 줄어든다
- 문제가 발생했을 때 해결하기가 쉽다 -> 유지 보수 굿
근데 우리가 사용하던 것들은 컴포넌트로 하기가 어렵다
=> 그래서 우리가 react(component 기반의 UI library)를 쓰는 것 !!
명령형 프로그래밍 방식 ex) jQuery
선언형 프로그래밍 방식 ex) React
Virtual DOM
5.2 Create React App
boiler plate = 이미 세팅이 완료된 패키지
터미널을 열어서 npx create-react-app reactexam1 이라고 쳐서
이렇게 다운을 받아준당ㅇ
터미널에 npm start라고 하니까
이런 창이 생성됐다 ㄷㄷ
이제 내 노트북이 웹 서버가 됐다고 함
local host = 자기 자신에게 가는 서버
끄고 싶으면 터미널에 Ctrl C 하면 된당
App.js를 켜서
import logo from './logo.svg';
import './App.css';
function App() {
return (
<div className="App">
<header className="App-header">
<h2>안녕 리액트</h2>
</header>
</div>
);
}
export default App;이렇게 했떠니
폼 미침..
근데 어케 html도 없는데 구현이 된것인가 ??!!
---> 스터디 시간에 물어보고 싶당
index.js
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render( //뭔가 화면에 그린다
<React.StrictMode>
<App /> //앱이라는 함수가 반환하는 값이
</React.StrictMode> //id가 root인 div아래로 들어간다
);node modules -> 파일 겁나 크다
npm i(=npm install) 로 하면 다시 다운 가능
favicon.ico = 웹 브라우저의 아이콘을 나타낸다
핸드폰에서 웹 할때 쓰이는 파일들
robots.txt -> 구글 등의 검색엔진에서 수집해갈때 이건 떼어가지 마라 이런거 정해주는 애인듯
App.js 에서
import './App.css';
function App() {
let name = "이서연"; //추가
return (
<div className="App">
<header className="App-header">
<h2>안녕 리액트 {name}</h2> //수정
</header>
</div>
);
}
export default App;이름 넣게 했더니
아싸뵤
js와 html을 합쳐서 사용할 수 있는 문법을 jsx라고 함
ㄴ js의 변수나 함수값을 html에 쉽게 사용할 수 있음
어렵다...어려워
5.3 JSX
ㄴ 리액트에서 주로 사용
MyHeader.js 파일을 만들고
const MyHeader = ()=>{};
export default MyHeader;추가해준다
그리고 App.js 파일에
import './App.css';
import MyHeader from './MyHeader'; //추가
function App() {
let name = "이서연";
return (
<div className="App">
<MyHeader/> //추가
<header className="App-header">
<h2>안녕 리액트 {name}</h2>
</header>
</div>
);
}
export default App;이렇게 하면
원래는 에러가 떠야되는데.. 왜 난 안뜨지?
아무튼 에러가 뜬다는데 왜 뜨ㅁ냐면 MyHeader.js에서 아무것도 정의하지 않아서임
MyFooter.js도 추가해서
const MyFooter = ()=>{
return <footer>myfooter</footer>;
};
export default MyFooter;넣어주었다
이렇게 하면 화면에 안 나타나다
왜냐?
App.js에서
function App() {
let name = "이서연";
return (
<div className="App">
<MyHeader/>
<header className="App-header">
<h2>안녕 리액트 {name}</h2>
</header>
</div>
);
}여기서에 처럼 자식으로 추가를 안했기 때문!
이렇게 자식으로 추가 안하면 아무리 많이 만들어도 화면에 안 보인다
JSX의 문법
1.닫힘 규칙
ex)
<div></div> 이렇게 꼭 닫아야한다 </>로
근데 html에선 <a> <image> <br> 이런 애들은 안 닫아도 됐었는데 jsx에선 어카지? 한다면
<image />이렇게 열자마자 닫아주자
2.컴포넌트를 만들어서 리턴하려면 반드시 최상위 태그로 나머지 애들을 묶어줘야한다
function App() {
let name = "이서연";
return (
<div className="App">
<MyHeader/>
<header className="App-header">
<h2>안녕 리액트 {name}</h2>
</header>
</div>
);
}여기에서 div 취상위 태그를 빼고
function App() {
let name = "이서연";
return (
<MyHeader/>
<header className="App-header">
<h2>안녕 리액트 {name}</h2>
</header>
);
}이렇게 하면 에러가 발생한다 JSX expressions must have one parent element.이러면서 ...
=> 그래서 반드시 최상위 태그로 묶어줘야 한드아
근데 묶기 싫다면?
import React from 'react';
-> 리액트를 불러오고
function App() {
let name = "이서연";
return (
<React.Fragment>
<MyHeader/>
<header className="App-header">
<h2>안녕 리액트 {name}</h2>
</header>
</React.Fragment>
);
}이렇게 감싸준다
이것도 귀찮다 하면
function App() {
let name = "이서연";
return (
<>
<MyHeader/>
<header className="App-header">
<h2>안녕 리액트 {name}</h2>
</header>
</>
);
}이렇게 빈 태그로 감싸줘도 된당
js랑 css 잇기
function App() {
let name = "이서연";
return (
<div className="App">
<MyHeader/>
<h2>안녕 리액트 {name}</h2>
<b id = "bold text">React.js</b>
</div>
);
}<b id = "bold text">React.js</b> -> 추가 해줬드아
그리고 App.css에다가
.App{
background-color: black;
}
h2{
color: red;
}
#bold_text{
color:green;
}컬러를 추가해줬더니
이렇게 바뀜
근데 나만 흰색 이따구로 되는건가? 이것도 스터디 시간에 물어봐야징
굳이 css안 끌어오고
import React from 'react';
//import './App.css';
import MyHeader from './MyHeader';
function App() {
let name = "이서연";
const style ={
App:{
backgroundColor:"black",
},
h2:{
color:"red",
},
bold_text:{
color:"greed",
}
};
return (
<div style={style.App}>
<MyHeader/>
<h2>안녕 리액트 {name}</h2>
<b id = "bold text">React.js</b>
</div>
);
}
export default App;ㄴ 이렇게 객체 처럼 표현도 가능하드아
ㄴ 난 왜 이러냐..
import React from 'react';
//import './App.css';
import MyHeader from './MyHeader';
function App() {
let name = "이서연";
const style ={
App:{
backgroundColor:"black",
},
h2:{
color:"red",
},
bold_text:{
color:"greed",
}
};
return (
<div style={style.App}>
<MyHeader/>
<h2 style={style.h2}>안녕 리액트 {name}</h2>
<b style={style.bold_text} id = "bold text">React.js</b>
</div>
);
}
export default App;<h2 style={style.h2}>안녕 리액트 {name}</h2>
<b style={style.bold_text} id = "bold text">React.js</b>요렇게 style = {style. ~~}을 넣어줬더니
헤헤 바뀜
=> 아무튼 객체를 사용해서 스타일링 할 수 있다 !!
<h2 style={style.h2}>안녕 리액트 {1+2}</h2> {} 안에 name 말고 1+2 처럼 표현식을 넣어도
쌉가눙 하다
const func = ()=>{
return "func";
}<h2 style={style.h2}>안녕 리액트 {func()}</h2>
이렇게 함수 호출해서 넣어도
ㅆㄱㄴ
const number =5;
return (
<div style={style.App}>
<MyHeader/>
<h2 style={style.h2}>안녕 리액트</h2>
<b style={style.bold_text} id = "bold text">
{number}는 : {number%2===0 ? "짝수":"홀수"}
</b>
</div>
);
}이렇게 바꿈
<b> 안에 삼항연산자 추가 했는데
왜 난 안뜨지????? 아까부터 계속 안뜬다
5.4 State(상태)
(사람의 경우)
상태 State => 계속해서 변화하는 특정 상태, 상태에 따라 각각 다른 동작을 함
(컴퓨터의 경우)
Counter.js를 생성하고
const Counter = ()=>{
return(
<div>
<h2>0</h2>
<button>+</button>
<button>-</button>
</div>
)
}
export default Counter; //내보내기이렇게 써준당
App.js에서는
import React from 'react';
//import './App.css';
import MyHeader from './MyHeader';
import Counter from './Counter'; //import 해준다
function App() {
const number =5;
return (
<div>
<MyHeader/>
<Counter/> //counter 써준다
</div>
);
}
export default App;
그러면 이렇게 버튼이 생성ㄴ된다
화면에서 0 말고 + 버튼을 누르면 1씩 증가하고 - 버튼을 누르면 1씩 감소하는 것을 원한다 !
ㄴ>
import React,{useState} from "react";
const Counter = ()=>{
//기본값이 0이서 출발, 1씩 증가, 1씩 감소하는 count 상태
const [count,setCount]=useState(0);
//useState = 배열을 반환하고 count = 상태의 값, setCount = count라는 상태를 변화시키는 상태변화함수
const onIncrease = ()=>{
setCount(count+1);
};
return(
<div>
<h2>{count}</h2>
<button onClick={onIncrease}>+</button>
<button>-</button>
</div>
)
}
export default Counter; //내보내기역시ㅓ 일단 useState 를 import해주었음
const Counter = ()=>{
//기본값이 0이서 출발, 1씩 증가, 1씩 감소하는 count 상태
const [count,setCount]=useState(0);
//useState = 배열을 반환하고 count = 상태의 값, setCount = count라는 상태를 변화시키는 상태변화함수
const onIncrease = ()=>{
setCount(count+1);
};Count를 화살표함수로 만들고
배열을 선언한 다음 increase함수를 만들었음
그래서 이렇게 누르면 1씩 증가가 가능하게 됨
빼기는 내가 만들어 봤따 !!!
const onDecrease = ()=>{
setCount(count-1);
};
return(
<div>
<h2>{count}</h2>
<button onClick={onIncrease}>+</button>
<button onClick={onDecrease}>-</button>
</div>
)decrease 함수 추가함 ㅎ
-last code-
import React,{useState} from "react";
const Counter = ()=>{
//기본값이 0에서 출발, 1씩 증가, 1씩 감소하는 count 상태
const [count,setCount]=useState(0);
//useState = 배열을 반환하고 count = 상태의 값, setCount = count라는 상태를 변화시키는 상태변화함수
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; //내보내기counter는 두개를 해도 상관없다
(대신 이름은 달라야한다!)
const [count,setCount]=useState(0);
//useState = 배열을 반환하고 count = 상태의 값, setCount = count라는 상태를 변화시키는 상태변화함수
const onIncrease = ()=>{
setCount(count+1);
};
const onDecrease = ()=>{
setCount(count-1);
};
const [count2, setCount2]=useState(0);
const onIncrease2=()=>{
setCount2(count2+1);
};
const onDecrease2=()=>{
setCount2(count2-1);
};이런 식으루
return(
<div>
<h2>{count}</h2>
<button onClick={onIncrease}>+</button>
<button onClick={onDecrease}>-</button>
<h2>{count2}</h2>
<button onClick={onIncrease2}>+</button>
<button onClick={onDecrease2}>-</button>
</div>
)반환 값에다가도
버튼을 하나 더 넣즈아
이렇게 0인게 두개 나오고
위에 버튼 아래 버튼 따로 움직임
요렇게
5.5 Props
app component에서 counter component의 초기 값이 0이 아닌 app component가 전달하는 값으로 써라 라는 명령어를 내리고 싶다면?
->prop을 쓰자
return (
<div>
<MyHeader/>
<Counter a={1} initailValue={5}/>
</div>
);counter에다가 props를 추가
const Counter = (props)=>{매개변수로 props 받아옴
그리고 console.log(props)를 하면
이렇게 객체 안에 담겨서 나온당
(App.js)
function App() {
const number =5;
const counterProps={
a:1,
b:2,
c:3,
d:4,
e:5,
initailValue:5,
}
return (
<div>
<MyHeader/>
<Counter {...counterProps}/>
</div>
);
}함수 내에다가 객체로 받아도 객체로 출력 가능하다
(counter.js)
const Counter = ({initialValue})=>{
const [count,setCount]=useState(initialValue);받아올 때도 비동기화? 그거로 받아올 수 있다
모르고 initialValue를 까먹었다
ㄴ> 어케될까?
ㄴ> undefinde이 뜬다
이렇게 초기 값이 사라지는 것!
Counter.js에다가
Counter.defaultProps={
initialValue:0,
}
export default Counter; //내보내기이렇게 또 객체를 추가하면
아주 잘 나온당 ~~
(OddEvenResult.js)
const OddEvenResult = ({count})=>{
console.log(count);
return<>{count%2===0?"짝수":"홀수"}</>;
};
export default OddEvenResult;
(Counter.js)에 추가
return(
<div>
<h2>{count}</h2>
<button onClick={onIncrease}>+</button>
<button onClick={onDecrease}>-</button>
<OddEvenResult count={count}/> //추가
</div>
);
하... 뭐지? 개빡친다
Container.js
const Container =({childern})=>{
return(
<div style={{margin : 20,padding:20, border: "1px solid gray"}}>
{childern}
</div>
);
};
export default Container;App.js
import React from 'react';
//import './App.css';
import Container from './Container';
import MyHeader from './MyHeader';
import Counter from './Counter';
function App() {
const number =5;
const counterProps={
a:1,
b:2,
c:3,
d:4,
e:5,
};
return (
<Container>
<div>
<MyHeader/>
<Counter {...counterProps}/>
</div>
</Container>
);
}
export default App;조금 수정하고 이렇게 코드 짰더니
이렇게 container..?밖에 안나온다..
왜인지도 모르겠다 똑같은데.. ㅠㅠ
이따 스터디 시간에 물어봐야징
글 재밌어용 ㅎㅎ