산탄총 수술 - 중복 코드 문제
(컴포넌트화 방식)
ㄴ 컴포넌트로 코딩하면 일단 작성할게 줄어든다
=> 그래서 우리가 react(component 기반의 UI library)
를 쓰는 것 !!
명령형 프로그래밍 방식 ex) jQuery
선언형 프로그래밍 방식 ex) React
Virtual DOM
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에 쉽게 사용할 수 있음
어렵다...어려워
ㄴ 리액트에서 주로 사용
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>
안에 삼항연산자 추가 했는데
왜 난 안뜨지????? 아까부터 계속 안뜬다
(사람의 경우)
상태 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인게 두개 나오고
위에 버튼 아래 버튼 따로 움직임
요렇게
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..?밖에 안나온다..
왜인지도 모르겠다 똑같은데.. ㅠㅠ
이따 스터디 시간에 물어봐야징
글 재밌어용 ㅎㅎ