react 15

[React][typescript] 형식에는 반복기를 반환하는 '[Symbol.iterator]()' 메서드가 있어야 합니다.

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

react 2024.03.20

[React] textarea에서 defaultValue가 안될 때

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

react 2024.01.30

[React] 한 요소에 클릭/더블클릭 이벤트 동시에 거는 법

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

react 2024.01.11

[React] jsx의 div 늪에서 빠져나오는 방법

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

react 2023.12.18

[React] input에서 양방향 바인딩 하기

이러한 기본적인 코드가 있음. 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(..

react 2023.12.15

[React] 함수에 파라미터 넘기는 법

다들 알 것이다. 리엑트에서는 함수를 괄호 안쓰고 이름만 쓴다는 거슬.. // 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} 이렇게 걸것임. 근데 이거를 한꺼번에..

react 2023.12.14

[React] 컴포넌트끼리 데이터 넘기기 총정리

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

react 2023.12.13