킹바구니

잘 또 하다가 갑자기 발생하는 오류... 잘쓰던 useRef를 다른 엘리먼트로 옮긴것뿐인데 왜그러지 싶었는데 타입스크립트는 엘리먼트가 그냥 div냐 main header같이 다른 시멘틱 엘리먼트냐를 또 가르나봄. 나 열받게하지마라! 1. useRef값 확인 const wrapper = useRef(null); // 기존. 에 걸어뒀음. const wrapper = useRef(null); // 변경. 에 걸어둠.

useRef로 element좀 써주려고 하면 이렇게 뜬다. 그냥 current가 있을 때를 조건으로 걸어주면 된다. 1. 미리 걸러주기 if (inputRef.current) { // 이곳에 코드 쓰기 } 참고로 나는 정의할때 이렇게 썼음 const inputRef = useRef(null); +추가로 이렇게 썼는데 여전히 그 밑에서 current가 null일 수 있다 이소리를 한다면 느낌표를 활용하자. if (inputRef.current) { gotoPage(inputRef.current!.value); } 느낌표의 의미는 'null일리없으니까 그대로 진행시켜'라는 의미라고 함.

움짤처럼 마우스로 캔버스 클릭 시 그 부분이 중심점이 되어 자동으로 원이 그려지고 다른 곳 클릭 시 원 하나가 확정되어 그려짐. 이후 다른 중심점을 잡으면 새로운 원도 그리면서 동시에 원래 그렸던 원도 기억해서 그려주는 내용임. 캔버스는 도대체 어떻게 작동이 되나 싶었는데 원리가 기존 원을 냅두고 새로 그리는게 아니라 싹 지워버리고 다시 다 그리는 것이였음... https://codepen.io/pmx/pen/qBvZQOV 마우스 위치에 따라 모양 그리고 기억하기 ... codepen.io 이건 진짜 새발의 피고 파면 팔수록 진짜 어렵다 이런 인터렉션.....

먼소리야 도대체...는 별거아니고 그냥 형변환 해달라는 의미임. 1. 숫자형으로 바꿔주기 const n = +inputRef.current.value - 5; 아주 빠른건 이렇게 앞에 +를 붙여주면 숫자로 변환된다.

Cannot destructure property 'basename' of 'React2.useContext(...)' as it is null. Link를 썼더니 이런 오류가 뜰 때는 바깥에 라우터로 감싸주자. 1. BrowserRouter 추가 import { BrowserRouter, Link } from "react-router-dom"; // ... return( )

css 내지 scss 등 아무튼 스타일 파일을 모듈로 이렇게 쓰려고 했더니 위와 같은 에러가 났음. import style from "@/styles/style.css"; 1. global.d.ts 파일 생성 declare module "*.css"; 폴더 위치는 src 바로 아래에 만들어주었고 위와 같이 쓰면 된다. scss도 할꺼면 복붙해서 scss로 하나 붙여주면 됨.

리엑트에서 제공하는 JSX문법은 자바스크립트에서도 html같은 코드를 쓸 수 있게 해주는 기능을 가지고 있음. 대신 조건이 있는데 바로 하나의 태그로 감싸야한다는 것이고, 이를 위해 보통 로 감싸곤 함. 근데 컴포넌트가 많아지고 거대질수록 자칫하면 의미도 없는 가 남발할 수 있음. 이걸 soup라고 함. 이를 해결하기 위해서는 이러한 방법이 있음. 1. wrapper 컴포넌트 만들기 const Wrapper = (props) => { return props.children; }; export default Wrapper; 그냥 Wrapper.js라는 파일을 만들어주고 위와 같이 씀. jsx가 아니기때문에 그냥 js파일임. 단순하게 props의 칠드런을 리턴하는데, 리엑트에서 말하는 props의 아이들이란..

이러한 기본적인 코드가 있음. const [age, setAge] = useState(0); const [username, setUsername] = useState(''); const ageHandler = (event) => { setAge(event.target.value); }; const usernameHandler = (event) => { setUsername(event.target.value); }; // jsx click 버튼 누르면 해당값 따로 저장해두고 다시 input 리셋하려고 함. const submitHandler = (event) => { event.preventDefault(); const data = { age: age, username: username }; setAge(..

다들 알 것이다. 리엑트에서는 함수를 괄호 안쓰고 이름만 쓴다는 거슬.. // jsx 근데 만약에 아래와 같이 파라미터를 넘겨아한다면 어떻게 해야할까? const [age, setAge] = useState(0); const [username, setUsername] = useState(''); const ageHandler = (event) => { setAge(event.target.value); }; const usernameHandler = (event) => { setUsername(event.target.value); }; 이렇게 기본적인 useState와 handler함수가 있다고 침. 그리고 각각의 input태그에 onChange={ageHandler} 이렇게 걸것임. 근데 이거를 한꺼번에..

뷰든 리엑트든 항상 나오는 props 한방에 정리한닷 Passing Props to a Component 1. 부모에서 자식에게 데이터 넘기기 일단 데이터 보낼때 따로 쪼개써도 되고(data/location), 안에 string이든 객체든 넣을 수 있음. 받은 친구는 props라는 단어를 통해 받아 쓸 수 있고, 혹은 { }안에 키값만 써서 props를 떼고 더 간편하게 쓸 수 있음. 2. 자식에서 부모에게 데이터 넘기기 솔직히 상위로 올려보낼때 포인터랑 함수이름 쓰는 부분 헷갈리는거 나만그럼? 3. 부모에서 자식 함수 쓰기 forwardRef를 쓰면 되는데 약간 쓸게 많아서 잘 봐야한다.