react
- 큰 단위의 함수의 앞글자는 대문자, 작은 단위의 함수는 소문자
- 컴포넌트 단위로 나눌 수 있다. 리액트 장점임.
map 이용해보기
- index는 유니크하다.!
const App = () => {
const [num, setNum] = useState(0);
const [recordNums, setRecordNums] = useState([]);
const saveRecord = () => {
setNum(0);
setRecordNums([...recordNums, num]);
};
return (
<>
<div>숫자 : {num}</div>
<div>
{recordNums.length == 0 ? (
<span>기록 없음</span>
) : (
<>
<h5>기록</h5>
<ul>
{recordNums.map((recordNum,index) => (
<li>
{index + 1}번 : {recordNum}
</li>
))}
</ul>
<hr />
<h5>기록(역순)</h5>
<ul>
{[...recordNums].reverse().map((recordNum) => (
<li>{recordNum}</li>
))}
</ul>
</>
)}
</div>
<div>
<button onClick={() => setNum(num + 1)}>증가</button>
<button onClick={() => setNum(num - 1)}>감소</button>
<button onClick={saveRecord}>기록</button>
</div>
</>
);
};
filter 기능
- false값은 거르고 true값만 담는다.
- 인덱스를 가지고 참, 거짓 가릴 수 있고
- 엘리먼트 가지고도 참, 거짓 가릴 수 있다.
console.clear();
console.log("==원본==");
const arr = [10, 20, 30, 40, 50];
console.log(arr);
console.log("==filter 적용==");
/* 인덱스로 참 거짓 */
const afterFilter = arr.filter((el, index) => {
return index != 2;
});
/* 모든 요소 가져오기 */
const afterFilter = arr.filter((el, index) => {
return true;
});
/* 엘리먼트로 참 거짓 */
const afterFilter = arr.filter((el, index) => {
return el != 40;
});
console.log(afterFilter);react에서 filter 기능 사용하기
const App = () => {
const [num, setNum] = useState(0);
const [recordNums, setRecordNums] = useState([]);
const saveRecord = () => {
setNum(0);
setRecordNums([...recordNums, num]);
};
const clearNumbers = () => {
setRecordNums([]);
}
const removeNumber = (index) => {
setRecordNums(recordNums.filter((_,_index) => _index != index));
}
return (
<>
<div>숫자 : {num}</div>
<div>
{recordNums.length == 0 ? (
<span>기록 없음</span>
) : (
<>
<h5>기록</h5>
<ul>
{recordNums.map((recordNum,index) => (
<li key={index}>
<span>{index + 1}번 : {recordNum}</span>
<button onClick={() => removeNumber(index)}>삭제</button>
</li>
))}
</ul>
<hr />
</>
)}
</div>
<div>
<button onClick={() => setNum(num + 1)}>증가</button>
<button onClick={() => setNum(num - 1)}>감소</button>
<button onClick={saveRecord}>기록</button>
<button onClick={clearNumbers}>전체기록삭제</button>
</div>
</>
);
};
자바 스크립트 함수 실행방식
console.clear();
function a(index) {
console.log(`a 실행 됨, index : ${index}`);
}
// function b(){
// a();
// }
// const b = function(){
// a();
// }
// const b = () => {
// a();
// }
const index = 2;
const b = () => {
a(index);
};
const c = a;
b();
c();
- App url 상단과 하단을 나눌 수 있다.
객체 상태로 인자 넘기기
- 매개변수가 {} 형태인 객체라면 인자도 객체 형태로 넘겨야한다.
- 폴더에 담아서 보내면 폴더 상태로 받아야한다.
- 개수가 다르다고해서 굳이 오버로딩을 할 필요가 없다. 오류가 나지 않는다!
console.clear();
import React, { useState } from "https://cdn.skypack.dev/react@18";
import ReactDOM from "https://cdn.skypack.dev/react-dom@18";
function hi_v1(){
const name = "하수달";
const msg = "안녕하세요를레히";
//템플렛 리터럴
console.log(`==hi_v1==`);
console.log(`${name}이 인사함`);
console.log(`메세지 : ${msg}`);
}
hi_v1();
const printName = ({name,age}) => {
console.log(`${name}님(${age})이 인사함`);
}
const printMsg = (msg) => {
console.log(`메세지 : ${msg}`);
}
function hi_v2(){
const name = "고수달";
const msg = "안녕하세요구르트";
//템플렛 리터럴
console.log(`==hi_v2==`);
printName({name});
printMsg(msg);
}
hi_v2();
function hi_v3(){
const name = "초고수달";
const age = 27;
const msg = "안녕하세용게뤼치킨너겟은 맛있어";
//템플렛 리터럴
console.log(`==hi_v3==`);
printName(
{
name,
age
//name : name , age : age 로도 가능.
}
);
printMsg(msg);
}
hi_v3();-
-
react에 응용하기!@
const NumberRecorderForm = ({ num, setNum, saveNumber, clearNumbers }) => {
return (
<>
<div>
<span>숫자 : {num}</span>
<button onClick={() => setNum(0)}>취소</button>
</div>
<div>
<button onClick={() => setNum(num + 1)}>증가</button>
<button onClick={() => setNum(num - 1)}>감소</button>
<button onClick={saveNumber}>기록</button>
<button onClick={clearNumbers}>전체기록삭제</button>
</div>
</>
);
};
const NumberRecorderList = ({ recordNums, removeNumber }) => {
return (
<>
<div>
{recordNums.length == 0 ? (
<span>기록 없음</span>
) : (
<>
<h5>기록</h5>
<ul>
{recordNums.map((recordNum, index) => (
<li key={index}>
<span>
{index + 1}번 : {recordNum}
</span>
<button onClick={() => removeNumber(index)}>삭제</button>
</li>
))}
</ul>
</>
)}
</div>
</>
);
};
const App = () => {
const [num, setNum] = useState(0);
const [recordNums, setRecordNums] = useState([10, 20, 30]);
const saveNumber = () => {
setNum(0);
setRecordNums([...recordNums, num]);
};
const removeNumber = (index) => {
setRecordNums(recordNums.filter((_, _index) => _index != index));
};
const clearNumbers = () => {
setRecordNums([]);
};
return (
<>
<NumberRecorderForm
num={num}
setNum={setNum}
saveNumber={saveNumber}
clearNumbers={clearNumbers}
/>
<NumberRecorderList recordNums={recordNums} removeNumber={removeNumber} />
</>
);
};react로 article 수정모드 일반모드 form 만들어보기
console.clear();
import React, { useState } from "https://cdn.skypack.dev/react@18";
import ReactDOM from "https://cdn.skypack.dev/react-dom@18";
const ArticleDetail = ({ id }) => {
const [editModeStatus, setEditModeStatus] = useState(false);
const title = "1번 글 제목";
const body = "1번 글 내용";
if(editModeStatus){
return (
<>
<form>
<div>수정모드</div>
<span>번호</span>
<span>{id}</span>
<div>
<span>제목</span>
<input type="text" placeholder="제목을 입력하라. 인간" />
</div>
<div>
<span>내용</span>
<input type="text" placeholder="내용을 입력하라. 인간" />
</div>
<div>
<button type="button">수정완료</button>
<button type="button" onClick={() => {setEditModeStatus(false)}}>수정취소</button>
</div>
</form>
</>
);
};
return (
<>
<h3>{id}번 게시물</h3>
<div>제목 : {title}</div>
<div>내용 : {body}</div>
<button onClick={() => {setEditModeStatus(true)}}>수정</button>
<hr />
</>
);
};
const App = () => {
return (
<>
<ArticleDetail id={1} />
</>
);
};
ReactDOM.render(<App />, document.getElementById("root"));
NumberRecorderListItem 수정모드 UI
console.clear();
import React, { useState } from "https://cdn.skypack.dev/react@18";
import ReactDOM from "https://cdn.skypack.dev/react-dom@18";
const NumberRecorderForm = ({ num, setNum, saveNumber, clearNumbers }) => {
return (
<>
<div>
<span>숫자 : {num}</span>
<button onClick={() => setNum(0)}>취소</button>
</div>
<div>
<button onClick={() => setNum(num + 1)}>증가</button>
<button onClick={() => setNum(num - 1)}>감소</button>
<button onClick={saveNumber}>기록</button>
<button onClick={clearNumbers}>전체기록삭제</button>
</div>
</>
);
};
const NumberRecorderList = ({ recordNums, removeNumber }) => {
return (
<>
<div>
{recordNums.length == 0 ? (
<span>기록 없음</span>
) : (
<>
<h5>기록</h5>
<ul>
{recordNums.map((number, index) => (
<NumberRecorderListItem
key={index}
number={number}
index={index}
removeNumber={removeNumber}
/>
))}
</ul>
</>
)}
</div>
</>
);
};
const NumberRecorderListItem = ({ index, number, removeNumber }) => {
const [editModeStatus, setEditModeStatus] = useState(false);
const readView = (
<>
<button onClick={() => setEditModeStatus(true)}>수정</button>
</>
);
const editView = (
<>
<input type="number" placeholder="숫자 써" min="0" />
<button onClick={() => setEditModeStatus(false)}>수정 완료</button>
<button onClick={() => setEditModeStatus(false)}>수정 취소</button>
</>
);
return (
<>
<li>
<span>
{index + 1}번 : {number}
</span>
<button onClick={() => removeNumber(index)}>삭제</button>
{editModeStatus ? editView : readView}
</li>
</>
);
};
const App = () => {
const [num, setNum] = useState(0);
const [recordNums, setRecordNums] = useState([10, 20, 30]);
const saveNumber = () => {
setNum(0);
setRecordNums([...recordNums, num]);
};
const removeNumber = (index) => {
setRecordNums(recordNums.filter((_, _index) => _index != index));
};
const clearNumbers = () => {
setRecordNums([]);
};
return (
<>
<NumberRecorderForm
num={num}
setNum={setNum}
saveNumber={saveNumber}
clearNumbers={clearNumbers}
/>
<NumberRecorderList recordNums={recordNums} removeNumber={removeNumber} />
</>
);
};
ReactDOM.render(<App />, document.getElementById("root"));onChange는 까먹으면 안된다람쥐는 귀여워
console.clear();
import React, { useState } from "https://cdn.skypack.dev/react@18";
import ReactDOM from "https://cdn.skypack.dev/react-dom@18";
const NumberRecorderForm = ({ num, setNum, saveNumber, clearNumbers }) => {
return (
<>
<div>
<span>숫자 : {num}</span>
<button onClick={() => setNum(0)}>취소</button>
</div>
<div>
<button onClick={() => setNum(num + 1)}>증가</button>
<button
onClick={() => {
num == 0 ? setNum(0) : setNum(num - 1);
}}
>
감소
</button>
<button onClick={saveNumber}>기록</button>
<button onClick={clearNumbers}>전체기록삭제</button>
</div>
</>
);
};
const NumberRecorderList = ({ recordNums, removeNumber }) => {
return (
<>
<div>
{recordNums.length == 0 ? (
<span>기록 없음</span>
) : (
<>
<h5>기록</h5>
<ul>
{recordNums.map((number, index) => (
<NumberRecorderListItem
key={index}
number={number}
index={index}
removeNumber={removeNumber}
/>
))}
</ul>
</>
)}
</div>
</>
);
};
const NumberRecorderListItem = ({ index, number, removeNumber }) => {
const [inputNumberValue, setInputNumberValue] = useState(number);
const [editModeStatus, setEditModeStatus] = useState(false);
const readView = (
<>
<button onClick={() => setEditModeStatus(true)}>수정</button>
</>
);
const editView = (
<>
<input
type="number"
placeholder="숫자 써"
min="0"
value={inputNumberValue}
onChange={(e) => setInputNumberValue(e.target.value)}
/>
<button onClick={() => setEditModeStatus(false)}>수정 완료</button>
<button onClick={() => setEditModeStatus(false)}>수정 취소</button>
</>
);
return (
<>
<li>
<span>
{index + 1}번 : {number}
</span>
<button onClick={() => removeNumber(index)}>삭제</button>
{editModeStatus ? editView : readView}
</li>
</>
);
};
const App = () => {
const [num, setNum] = useState(0);
const [recordNums, setRecordNums] = useState([10, 20, 30]);
const saveNumber = () => {
setNum(0);
setRecordNums([...recordNums, num]);
};
const removeNumber = (index) => {
setRecordNums(recordNums.filter((_, _index) => _index != index));
};
const clearNumbers = () => {
setRecordNums([]);
};
return (
<>
<NumberRecorderForm
num={num}
setNum={setNum}
saveNumber={saveNumber}
clearNumbers={clearNumbers}
/>
<NumberRecorderList recordNums={recordNums} removeNumber={removeNumber} />
</>
);
};
ReactDOM.render(<App />, document.getElementById("root"));재미삼아 해본 선생님이 말씀하시는 말 받아적어보기
- 졸릴때 꿀팁 쌤이 하는 모든말 받아적기, 진짜 너무 졸릴때 나만의 꿀팁이다.
넘버랑 플레이스홀더 숫자 써 음... 일단 요고 있으면 된는거아냐 이렇게 보이면 되는거아냐 이부분만 고쳐지면 되는거 아냐 이걸로 숫자니까 넘버타입이라서 이런거 되거든요 1증가 1감소 이런 옵션도 있어 min="0"수정버튼 눌렀을때 0아래로 안내려가 수정은 양수쪽으로만 가능하게 이런 옵션을 주는거지
또 이것도 써봤잖아요 애초에 들어있는애들 value={number} 여기서에 넘버가 보여지고 있는거잖아요 이렇게 하면 20 이렇게하면 30주잖아
그러면 이제 나 이거 고쳤어 어? 이걸론 안되네 아 이렇게? 뭔가 되질 않네..아ㅣ 그러네.. 그러면 이걸 빼볼까 어차피 옆에 나오잖아 이거 그럼 어떻게 돼 어 되네. 그리고
이제 수정 끝났어 그러면? 뭐 수정 완료 또는 취소도 할 수 있어야겠지? 다시 못돌아가니까? 애티튜드에서 보여줘야하는 버튼 얘는 하나 뭐야 수정완료 얘는 뭐야 수정 취소 취소가 해야할 일은? 근데 둘 다 똑같을 것 같은데 셋에디터모드스테이트스를 뭘로 바꿔주면 돼 false로 바꿔주면 리드뷰가 보일 거잖아요 얘도 false.. 얘도 false로 바꿔주면 뭐가 가능해? 수정해서.. 다시 돌아간다 다시 돌아가야할거아냐 이렇게 이 상태가 됨으로써
그치? 어 . 수정완료랑 취소까지 해본거고 그럼 된거아냐 일단? 일단 UI작업은 끝난거 같은데 url 맞죠 좀 복잡해 보일 순 있는데 음... 일단 요거 먼저 보죠. 이 부분은 누가그려요. 레코더리스트가 그리고 있는거죠 왜 10 20 30이에요 초기값이 이렇게 세팅되어 있어서 인거죠 여깄다. 그걸 가지고서 얘가 그려 넘버레코더리스트로 찾아가볼게요 넘버레코더리스트야 얘가 하는 일은 뭐에요? 일단 기록물이 있는지 없는지 체크해서 없으면 얘를 보여주는거고 만약 있으면 반복해서 그려
리드뷰랑 에디튜드를 준비해놨어 나는 왜냐면 수정버튼을 눌르면은 둘 중 하나는 나와야하니까
TODO
- 리액트(React), 레코드 폼과 레코드 리스트로 컴포넌트 분리 동영상 다시보고 벨로그 정리
- 유니티로 게임만들기
- 오늘 배운 수정모드, 일반모드, react onChange함수 마스터하기
느낀점
- 봄이와서 그런지.. 유독 밥 먹고 나면 더더욱 더더더더욱 너무너무너무 졸려서 1~3시사이에 졸려서 미칠 것 같다...
- 리액트 상당히 흥미롭고 재밌는 것 같다.
우당탕탕 연이의 개발일기
먹태 컴퍼니는 당신을 기다립니다.