qwef

html 요소랑 이을 수 있음. function Main() { const [text, setText] = useState(''); const textRef = useRef(); const handleChange = (e) =>{ setText(e.target.value); console.log(textRef.current); } const handleClick = ()=>{ console.log(text); textRef.current.value = ""; } return ( 버튼 ); } export default Main; 저렇게 태그에 ref={정의한ref} 하고 ref에 접근할 때는 ref.curret로 접근해야 요소가 나옴. 난 직관적인거 좋아해서 그러면 useRef만 쓰면 저렇게 저 요소에 ..

컴포넌트 내부 스크립트 자식노드 프로퍼티 메소드 생명주기 변수 반응형 변수 문서 이벤트 바인딩 반복문, 조건문 css 컴포넌트 외부 컴포넌트 불러온 후 호출 자식노드 주기 프로퍼티 주기 전역변수 (Provide, Inject 등)

state는 값을 변경되면 html에 바로바로 반영되는 반응형으로 만들고 싶을 때 사용하는 거임. const [number, setNumber] = useState(5); 이렇게 하고, useState가 왼쪽에 참조할 값, 오른쪽에 그 참조할 값 변경하는 콜백함수. const increase = () => { setNumber(number + 1); }; 이런 식으로 사용하면 됨. 내가 명명한 setNumber 해서 값 태그에서 참조할 때는 {number} 이런 식으로. 하다보면 저거 여러 개 사용하게 되는데, const [state, setState] = useState({ name:'', gender:'', birth:'', bio:'' }); 이렇게 객체형태로 한번에 여러개 가능. 근데 이러 면 사..

그러니까, 이렇게. Footer도 내가 만든 컴포넌트고, ChildComp도 그런데, 저렇게 넣을 경우 저 ChildComp에 접근하는 방법. 일단은 결국 props로 다 관리한다. 쟤는 props.children 해서 관리할 수 있다. 참고로 저기에, 이렇게 하면 props.children이 배열로 들어오는데, ' ' ChildComp ' ' 이렇게 들어온다. 컴포넌트 단위로 단위가 나눠지는 모양이다. asdfsda dsafasdf 이렇게 하면 컴포넌트 단위로 나눠진다. ' ' ChildComp ' ' ChildComp ' asdfsda dsafasdf ' 이렇게 된다. 그러므로 공백 생각하라. 그러므로, 저렇게 위에서 넣어준 자식 컴포넌트를 사용하고 싶으면, function Footer(props) ..

리액트는 반복문을 처리하는데 map을 많이 쓴다. { list.map( el =>{ return {el} }) } 이런 식으로. map 자체는 js 자체의 기능이긴 하다. 리스트.map(각각요소의별칭 =>{ ~~처리나 계산 등~~~ return {각각요소의별칭} }) 저렇게 return 해서 최종적으로 각 element에 들어갈 값을 return 시켜준다. 저러면 최종적으로 return된 값이 모인 배열이 완성되었었나?

리액트는 싱글페이지 어쩌고로, js타입의 한 페이지에 html, js 모두 쓴다. 즉, html 요소도 쓴다. 그래서 이거 봤더니, const getLi = ()=>{ const list = []; for(let i =0; i< 3; i++){ list.push({i}); } return list; } 아예 저 저 요소가 뭔가 리액트에서 제공하는 객체였다. 그리고, 저 객체사이에서 값을 쓰려면 {변수명} 이렇게 쓰면 된다. 원래 js에서는 문자열로 html 페이지에 넣어서 html에서 읽게 만들었다면, 저거는 그냥 html을 저렇게 객체로 다룬다. 문자열로 넣지 않았는데도 저게 잘 됐다. 그리고, return ( {getLis()} ); 이렇게. 그러니까, {[1,2,3]} 이렇게 배열로 받으면, 그 요..

function App(){ // const name = "홍홍홍"; const bodyProps = { name : '홍길동', location : '대전시' } return( ) } export default App; 저렇게 {...객체} 해서 주면 각각 name="홍길동" location="대전시" 이렇게 전달이 된다.

{변수명} 저렇게 중괄호 변수명 하면 됨. 저거 계산도 됨. 함수 호출도 됌. {num}은 {num % 2 === 0? "짝수" : "홀수"}입니다. 근데 style의 경우, 객체형식으로 넘길 수 있음. 이렇게도 감싸서 객체로 만들어서도 되고, const sty = { backgroundColor: "royalblue", color: "#fff", }; 이렇게 해도 되고. 이렇게 객체로도 넣을 수 있으니, 아예 컴포넌트로 객체형태로 내보내서 다른 컴포넌트에서 import 해서 쓸 수 있음. 근데 뭐 계산도 할 수 있고 그러니.. 중괄호는 요소 내에서 자바스크립트 문법 쓴다고 생각하면 될 듯?

https://github.com/kfs121/react-fetch GitHub - kfs121/react-fetch Contribute to kfs121/react-fetch development by creating an account on GitHub. github.com useEffect()로 한번에 여러 값 들을 배열에 불러와 저장하고 시작하는게 어떠냐고 했다. 맞다. 저렇게 값을 자주 가져오면 확실히 성능 상의 문제가 있고, 한번에 여러 개 가져오고 일정 수 까지 가져오면 또 그때 몇십개 가져오는 게 좋다. useState? 를 이용하라고 하셨다. 그리고 todo 리스트 한번 해보라고 하셨다. 뭔가 적은 다음에 + 버튼 누르면 추가. 그렇게 추가 시킨 다음에 추가시킨 요소 더블클릭 하면 그 요..

요새는 기본을 함수형 컴포넌트로 쓴다고 함. import React, { useState } from 'react' function CounterFunc(props){ const [number, setNumber] = useState(Number(props.number)); const increase = ()=>{ setNumber(number + 1); } const decrease = ()=>{ setNumber(number - 1); } return( 주문 수량은? 수량 : {number} +1 -1 ) } function FuncComp(){ return( ) } export default FuncComp; 전 것의 함수형 컴포넌트 버전. 먼저, 저렇게 props로 넣어준 속성들 받아올 수 있고,..