킹바구니 🦜

리엑트에서 배열인 변수를 set함수를 통해 변경하려고 하는데 자꾸 이런 멘트가 떴음. 1. 초기값 셋팅해주기 반복기가 없다는 의민데 혹시 초기값이 undefined나 빈값인건가 체크해서 변경해주면 된다. const [arr, setArr] = useState(); // 이 부분에서 useState([]) 이렇게 변경해주기 setArr((prev) => ([...prev, {title: "제목", text: "내용"}]));

모달에 textarea를 하나 넣어서 초반에 data객체에 어떤 값이 있으면 그걸 출력하고, 없으면 빈칸을 출력하는 뭐 그런 간단한걸 하려고 했는데 이상하게 있는 값을 출력을 안해줘서 찾다보니 아래와 같은 요소를 추가해줬어야했었다. 1. key 추가 일단 사정상(?) 해당 값을 useState로 사용 불가했고, useEffect도 안되는 상황이였음(커스텀 훅이랑 연결을 시켰더니 뭔가 에러가 난모양인데 어렵다어려버). 암튼 그런 상황에서 이친구가 담아야할 값이 변했고 이를 렌더링 해주라는 의미에서 key를 넣어줬더니 훌륭하게 작동됨. 사실 key는 리엑트 공부할때 배열로 데이터 뿌리면서 나오는 요소긴 하다만, 이럴때 되면 또 여기에 적용할 생각이 뒤늦게야 든단말이지...ㄷ; https://kentcdodd..

버튼 클릭시 a가, 더블클릭시 b가 실행되야하는데, 더블클릭 시 처음에 클릭 이벤트가 한번 실행 되고 그 다음에 더블클릭 이벤트가 실행되는게 보여서 방법이 없나 하고 찾아봄. 슬쩍 보니까 한 요소에 이렇게 클릭+더블클릭 이벤트를 동시에 거는건 비추한다고 하는거같았음. 중간에 리엑트식 해결방법이 있어서 저장해둠. 1. 커스텀 훅 만들기 import { useState, useEffect } from 'react'; function useSingleAndDoubleClick(actionSimpleClick, actionDoubleClick, delay = 250) { const [click, setClick] = useState(0); useEffect(() => { const timer = setTimeo..

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를 쓰면 되는데 약간 쓸게 많아서 잘 봐야한다.

1. useState로 여러 상태를 관리하는 법 고객 정보를 받는 input이 2개가 있다고 한다면 보통 이렇게 각각 state두고 관리할 것임. const [age, setAge] = useState(0); const [username, setUsername] = useState(''); 그런데 이런 각각의 코드를 const [userData, setUserData] = useState({ age: 0, username: '' }); 이렇게 한꺼번에 받을 수 있음. 어차피 같은 역할을 하는 친구들이면 저렇게 받는게 훨씬 깔끔하고 편할 수 있음. 2. set함수에 콜백함수 쓰는 이유 만약 input창에 onchange 이벤트를 걸어서 쓸때마다 set함수로 해당 변수를 바꿔준다면 이렇게 쓰면 된다. // ..