성공을 즐기자

안녕하세요~ 보니까 이부분 포스팅을 안한것같아서 갑자기 씁니다 !! todos 데이터를 state로 만들어서 갖고있는데요 이를 화면상에 보이도록 만들어줍시다 ! function App() { const [todos, setTodos] = useState(mockData); const idRef = useRef(2); const onCreate = (content)=>{ const newTodo = { id:idRef.current+=1, isDone:false, content:content, date : new Date().getTime() } setTodos([newTodo,...todos]) } return ( ..

useState에 비해 useReducer가 더 복잡하다 (처음 본 체감) ...! 제미나이에게 물어보니 useState가 90%라면 나머지를 useReducer라고 한다. => 복잡한 상태관리가 필요할 때 필수적 !! import { useReducer } from "react";// reducer : 변환기 // -> 상태를 실제로 변환시키는 변환기 역할 function reducer(state, action) { console.log(state, action); if(action.type==="INCREASE"){ return state+action.data } else if(action.type==="DECREASE"){ return..

그거 아세요~ input태그로 만든 체크박스는 onClick이 아니라 onChange를 쓴답니다 ! JS에서 함수이름() 을 쓰면 지금 당장 실행해 ! 라는 의미가 되어버려서 onClick={onUpdate(id)} => 이렇게 하면 바로 onUpdate가 실행되어버려 리랜더링이 되고 또 다시 여기를 읽게 되어 무한 리렌더링이 되어버림 !! onClick={()=>onUpdate(id)}=> 이렇게 함수를 한번 감싸줘야합니다. JS 내장함수 * map = 배열의 길이 유지 & 내용 변경 * filter = 남기는 것 {filteredTodos.map((todo)=>{ return })} 1 ) list처럼 배열을 화면에 뿌릴 때 key를 꼭 넣..

컴포넌트에는 생애주기가 있다.1) mount - 컴포넌트의 탄생2) update - 변화 3) unmount - 죽음 => 이러한 라이프사이클을 제어할 때 useEffect를 이용한다. useEffect => 리액트 컴포넌트이 사이드이펙트(파생효과)를 제어하는 ReactHook useEffect( 롤백함수 , 배열 )=> 배열을 의존성 배열이라고 한다.이 배열에 있는 값이 변경되었을 때 롤백함수에 있는 함수가 실행이 된다. 근데 왜 쓰니 ? 이거 setState(state변경)됐을 때 거기 함수 넣어주면 되는거 아니니 ? => NO! setState는 비동기함수이기 때문에 set함수 뒤에 호출이 되어도 그 state는 변경이 안된 상태임 즉 제대로 그 state 값을 받아서 사용..

치지직 쵸쵸우 알림 - 개인정보처리방침 최종 업데이트: 2026년 2월 [요약] 본 확장프로그램은 개인정보를 수집하지 않으며, 모든 데이터는 사용자의 브라우저에만 저장됩니다. 1. 수집하는 정보 본 확장프로그램은 개인정보를 수집하지 않습니다. 저장되는 데이터: 방송 상태 정보, 마지막 확인 시간 (로컬 브라우저에만 저장) 2. 데이터 저장 모든 데이터는 사용자의 로컬 브라우저(Chrome Storage)에만 저장됩니다. 외부 서버로 전송되거나 저장되지 않습니다. 3. 외부 서비스 치지직(Chzzk) API를 통해 방송 상태를 확인합니다. API 호출 시 사용자를 식별할 수 있는 개인정보는 전송되지 않습니다. 4. 데이터 공유 어떠한 데이터도 제3자와 공유하지 않습니다. 5. 데이터 삭제 확장..

React Hooks => class component의 기능을 함수 컴포넌트에서도 이용할수있도록 한것 ! 이전에는 (2017년 이전) class component에서만 사용할수있었던 리액트의 state, ref ... 기능을 Hook(훅)낚아채와서 function component에서도 사용할수있게 한것입니다 ! ex) useState , useRef => 접두사로 use를 쓴다는 공통점이 있어요 특징 ! 1) 함수 컴포넌트 내부에서만 호출이 가능합니다. 2) 조건문, 반복문 내 사용이 불가합니다. 3) 나만의 Hook 제작이 가능하다 ( custom Hook) ( 예시 코드 ) HookExam.jsx => 커스텀 훅 - useInput을 만들어 import하여 사용하는 코드입니..

안녕하세요~ 이전편에 이어서 리액트 state로 사용자의 입력을 받아보겠습니다~ 이전 코드에서 더 간결하게 만드는게 이번 코드의 목표에요 https://what-am-i.tistory.com/545 react - 사용자의 입력을 받아보자 (state사용)안녕하세요~ 오늘도 리액트를 공부해보아요 리액트를 맨날 공부하다가 말다가 해서 그런가 자동으로 복습이 되어서그런지 어렵지는 않은 느낌이네요~ 열심히 리액트 공부해서 기초를 마스터하what-am-i.tistory.com 이전 코드에서 name, birth, country, bio를 각각 state를 만들어서 각 change 함수를 만들어서 setting을 했죠 그거를 한개로 통합해줄거에요 import { useState } from "react";c..

안녕하세요~ 오늘도 리액트를 공부해보아요 리액트를 맨날 공부하다가 말다가 해서 그런가 자동으로 복습이 되어서그런지 어렵지는 않은 느낌이네요~ 열심히 리액트 공부해서 기초를 마스터하고 리액트 네이티브로 앱을 만들고 싶습니다 !! 오늘은 state를 이용해서 변수를 입력받아서 받은 변수를 바로 state에 저장하는 것을 배웠어요 우선 이름, 생년월일, 국적, 자기소개를 입력 받는 간단한 내용이구요 useState를 통해 값을 담을 변수와 그 변수를 세팅할 함수를 정의해줍니다. e 에는 다양한 정보가 있는데요 거기서 e.target.value를 하면 그 input태그의 값을 반환해줘요 onChange 이벤트를 통해서 변화가 있을 때마다 세팅하도록 만들어주었습니다. // 간단한 회원가입 폼 //..

AI 시대에 리액트 코드를 공부하다... import { useState } from 'react'const Bulb = ({light}) =>{ return ( {light === "ON" ? ON : OFF } )}function App() { const [light, setLight] = useState("OFF"); return ( { setLight(light === "ON" ? "OFF" : "ON"); }}> {light === "ON" ? "끄기" : "켜기"} )}export default App; =..

안녕하세요 ! 크롬 확장 프로그램 - 치지직 알림 프로그램을 크롬 웹스토어에 올렸었습니다 ~ 이 프로그램을 조금 수정해서 1.0.0 > 1.0.1 으로 올리려고 합니다. 수정할 부분은 ! 업데이트 내역 v1.0.1 - 치지직 방송중 색 변경 (빨간색 > 초록색) - 라이브 방송시 방송명 정보 추가 짜잔~ 라이브 방송중에는 초록색이 되도록 수정해주었구요 ~ 라이브 이름이 나오도록 수정했습니다 ! 수정해서 올려놓았습니다 ~ 검토 후 자동으로 올라간다고 합니다 . 나름 13명이나 다운 받았네요 ...! 왜 미국에서 다운로드가...? 구글 개발자들이 보려고 다운로드 했나..궁금