2024-04-04 TIL
- React 여기서는 클래스를 만드는게 아닌 사용해서 몰라도됨 알면 재밌다. "React" 는 facebook.com의 UI를 더 잘 만들기 위해서 페이스북에서 만든 Javascript UI 라이브러리 리액트의 정의를 이해하는 것은 굉장히 어려운 일입니다. → 정의 하기는 쉽지만 이해하기는 어렵다. 용자가 정의해서 태그를 만드는 것을 "사용자 정의 태그"라고 하지 않고 "컴포넌트" 라고 부른다, 가독성을 획기적으로 높일 수 있습니다.
재사용성이 높아진다
유지보수가 훨씬 더 편리 deploy → 고객에게 보여주는것 강의로 부터 독립하는 법 → 공식 문서에 익숙 해지기 수단과 방법을 가리지 않고 몸무림 치기 리액트 하는법-
온라인 플레이 그라운드 → 온라인에서 바로 리액트 가능 설치 x
-
툴체인 → 필요한 모든 환경을 제공 → create-react-app 사용
npx 실행하려면 node.js 사용해야한다.
node.js 설치 후
npm 버전 확인
npm create-react-app .
npm run start
바탕화면 reacct 사용시 오동작 react-app 사ㅣ용
리액트는 클래스와 함수 두가지로 만드는데 요즘 함수로 만든다.
"npm" 은 Node.js 라고 하는 기술을 이용해서 만들어진 여러가지 앱들을
여러분이 명령어 환경에서 아주 손쉽게 설치할 수 있도록 도와주는 도구
npx 항상 실행 → 최신 버전 사용 가능
src→index.js 진입점 입구
→ ui 진입점 ./App 에서 왔다.
배포 → npm run build → serve -s build
-
컴포넌트(사용자 정의 태그) 만들기 → 복잡한 같은 내용들을 묶어 태그로 만든다.
- 함수를 정의 → 대문자로 만든 건 사용자 정의 태그
- return 값으로 HTML 코드를 반환한다.
내가 만든 프로젝트를 다른사람과 공유 할 수 있고 다른사람이 만든 컴포넌트를 내가 쓸 수 있다.
function Header(){
return(
<header>
<h1>
<a href="/">WEB</a>
</h1>
</header>
);
}
function Nav(){
return(
<nav>
<ol>
<li><a href ="/read/1">html</a></li>
<li><a href ="/read/2">css</a></li>
<li><a href ="/read/3">js</a></li>
</ol>
</nav>
);
}
function Article(){
return(
<article>
<h2>WELCOME</h2>
Hello, WEB
</article>);
}
function App() {
return (
<div>
<header>
<h1>
<a href="/">WEB</a>
</h1>
</header>
<nav>
<ol>
<li><a href ="/read/1">html</a></li>
<li><a href ="/read/2">css</a></li>
<li><a href ="/read/3">js</a></li>
</ol>
</nav>
<article>
<h2>WELCOME</h2>
Hello, WEB
</article>);
</div>
);
}function Header(){
return(
<header>
<h1>
<a href="/">WEB</a>
</h1>
</header>
);
}
function Nav(){
return(
<nav>
<ol>
<li><a href ="/read/1">html</a></li>
<li><a href ="/read/2">css</a></li>
<li><a href ="/read/3">js</a></li>
</ol>
</nav>
);
}
function Article(){
return(
<article>
<h2>WELCOME</h2>
Hello, WEB
</article>);
}
function App() {
return (
<div>
<Header></Header>
<Nav></Nav>
<Article></Article>
</div>
);
}HTML 태그와 우리가 만든 컴포넌트는 다르다.
→ HTML태그는 src, width height를 가지고 있다. 값에 따라 결과가 바뀌게 되는데 이것을
속성이라고 한다.
→ react 는 속성을 PROP이라고 한다.
<Header></Header>
<Nav></Nav>
<Article></Article>
<img src="image.jpg" width="100" height="100">
리액트에서 속성 주는법 PROPS 사용하기
function Article(props){
return(
<article>
<h2>{props.title}</h2>
{props.body}
</article>);
}
function App() {
return (
<div>
<Header title="REACT"></Header>
<Nav></Nav>
<Article title="Welcome" body="Hello, WEB"></Article>
</div>
);
}
반복 전달하기
function Nav(props){
const lis =[
// <li><a href ="/read/1">html</a></li>,
// <li><a href ="/read/2">css</a></li>,
// <li><a href ="/read/3">js</a></li>
]
for(let i=0; i<props.topics.length; i++){
let t = props.topics[i]
lis.push(<li key={t.id}><a href={'/read/'+ t.id }>{t.title}</a></li>)
}
return(
<nav>
<ol>
{lis}
</ol>
</nav>
);
}
function App() {
const topics = [
{id:1, title:"html", body:"html is ..."},
{id:2, title:"css", body:"css is ..."},
{id:3, title:"js", body:"js is ..."},
]
return (
<div>
<Header title="REACT"></Header>
<Nav topics = {topics}></Nav>
<Article title="Welcome" body="Hello, WEB"></Article>
</div>
);
}이벤트 → 기능
function App() {
const topics = [
{id:1, title:"html", body:"html is ..."},
{id:2, title:"css", body:"css is ..."},
{id:3, title:"js", body:"js is ..."},
]
return (
<div>
<Header title="REACT" OnChangeMode ={function(){
alert("HELLO");
}}></Header>
<Nav topics = {topics}></Nav>
<Article title="Welcome" body="Hello, WEB"></Article>
</div>
);
}
function Header(props){
console.log('props', props, props.title);
return(
<header>
<h1>
<a href="/" onClick={function(event){
event.preventDefault();
props.OnChangeMode();
}}>{props.title}</a>
</h1>
</header>
);
}<a href="/" onClick={function(event){
event.preventDefault();
props.OnChangeMode();
}}>{props.title}
→ event를 처리하는 정보 .preventDefault(); reload 방지
→ props.OnChangeMode(); props 인자로 받아온 함수를 실행
태그 내 속성을 추가해서 props 인자로 여러개를 받아 올 수 있다.
function() → ()=> 로 바꿀 수 있다.
목록안에서 링크를 설치하고 링크가 이벤트를 실행할 때 입력값을 주는 법
for(let i=0; i<props.topics.length; i++){
let t = props.topics[i]
lis.push(<li key={t.id} >
<a id ={t.id} href={'/read/'+ t.id } onClick={event=>{
event.preventDefault();
props.OnChangeMode(event.target.id);
}}>{t.title}</a>
</li>)
}
function App() {
const topics = [
{id:1, title:"html", body:"html is ..."},
{id:2, title:"css", body:"css is ..."},
{id:3, title:"js", body:"js is ..."},
]
return (
<div>
<Header title="REACT" OnChangeMode ={function(){
alert("HELLO");
}}></Header>
<Nav topics = {topics} OnChangeMode={(id)=>{
alert(id);
}}></Nav>
<Article title="Welcome" body="Hello, WEB"></Article>
</div>
);
}li 클릭시 id값 나오게 할 수 잇도록 함
state 컴포넌트를 만드는 내부자ㄹㄹ 위한것
Prop 컴포넌트를 사용하ㅡㄴ 외부자를 위한건
function App() {
// const _mode = userState('READ');
// const mode = __mode[0];
// const setMode = _mode[1];
let [mode, setMode] = useState('READ');
const topics =
[{id:1, title:"html", body:"html is ..."},
{id:2, title:"css", body:"css is ..."},
{id:3, title:"js", body:"js is ..."},]
let content = null;
if (mode == 'WELCOME'){
content = <Article title="Welcome" body="Hello, WEB"></Article>
}else if(mode =='READ'){
content = <Article title="Read" body="Hello, WEB"></Article>
}
return (
<div>
<Header title="REACT" OnChangeMode ={function(){
setMode("WELCOME");
}}></Header>
<Nav topics = {topics} OnChangeMode={(id)=>{
setMode("READ");
}}></Nav>
{content}
</div>
);
}mode , setMode 는 이름 맘대로 바꿔도 됨
id → NUMBER로 바꾼다 ??? 안바꿔도 되는데?
7편까지 들음
권한 없는거 삭제 rm -rf '삭제할 폴더명’
n = input()
lst = {'1': 1, '2': 2, '3': 3, '4': 4, '5': 5, '6': 6, '7': 7, '8': 8, '9': 9,'0':0, 'a': 10, 'b': 11, 'c': 12, 'd': 13,
'e': 14, 'f': 15}
sum1 = 0
if n[0] == "0":
if n[1] == "x": # 16진수
for i in range(len(n) - 2):
sum1 += lst[n[i + 2]] * (16 ** (len(n) - i - 3))
print(sum1)
else: # 8진수
for i in range(len(n) - 1):
sum1 += lst[n[i + 1]] * (8 ** (len(n) - i - 2))
print(sum1)
else:
print(int(n))x =input()
if x[0] == '0' and x[1] =='x':
print(int(x,16))
elif x[0] == '0' and (x[1] != 'x'):
print(int(x,8))
else:
print(int(x))16진수 출력법 어렵게 짯는데 쉽게 나타낼 수 있다..
최고가 되기 위한 여정