jin's Blog

흔히 map 돌릴때 key가 사용되는데react에서는 key가 되게 유용하다. key가 값을 식별해서 고정시켜준다? 한 마디로 약간 ID 같은 느낌이다.예를 들어서 const [counterChanges, setCounterChanges] = useState([ { value: initialCount, id: Math.random() * 1000, }, ]); useState 초기값을 이런식으로 만들어서 value와 id를 부여해주고아래와 같이 받아서 그 값을 사용할 때 {history.map((count) => ( ))}  key로 고유 id를 지정해놓으면 새로운 값이 추가되더라도 기존의 값을 계속해서 지목한다.근데 이 방법이 되게 유..

요즘 대한민국에 악재가 많다.대통령 내란부터 무안공항 참사까지.. 한국을 떠나 멀리 시드니에 있어도그 고통과 아픔은 그대로 전해진다. 유튜브를 열어도 인스타를 열어도여러 매체에서 새로운 소식인 양같은 뉴스가 반복된다. 나의 마음속 깊은 곳에도같은 아픔이 반복된다. 지금 나는 집중을 해야 하는 중요한 시기이다.석사 졸업을 1년 앞두고스스로 개발 공부에 대한 부족함을 느끼고풀로 집중해도 모자란데아침에 눈을 뜨면 새로운 기술과 Ai의 기술발전, 그 속도가나를 위협한다.  시드니에서 IT 개발자로서의 첫걸음이 중요하다.이곳은 경력과 네트워킹이 중요한 나라이니까 운 좋게 얻은 첫 직장에서는 일주일 만에 해고를 당했고그로 인해 나의 부족함을 더 절실히 느꼈던 거 같다. 좋은 경험이었다.그동안 나는 포트폴리오나 그동..

이 전의 다뤘던 Memo의 기능처럼 리 랜더링을 방지하기 위해 memo를 쓰지만더욱 중요한 건 컴포넌트를 적절하게 나누는 것이다. 컴포넌트를 나누는 것이 React의 궁극적 이유이기도 하고결론적으로 컴포넌트를 잘게 나눠서 구분하여 관리하는 것이 효율적이다.  + useMemo 기능: 이 기능과 그냥 memo를 혼동하면 안된다. memo는 컴포넌트를 감싸고 useMemo는 함수를 감싼다.예를들어서 복잡한 계산이 있는 함수의 경우, 계속해서 랜더링 되게 하고 싶지 않을때 useMemo를 사용하고똑같이 dependeny 를 설정하여 불필요한 랜더링을 방지한다. 다만 useMemo 또한 사용하는 자체만으로 성능에 영향을 주기때문에 남발해서 사용하는 건 지양해야한다.  +++ Dom에 대한 이해 +++ React..

내가 React 개발자가 되기 위해 길을 잃지 않기 위해서 꼭 알아야 하는 기본 지식들을 써보자. 1. React의 기본 개념 및 필수 지식 React 개발자로서 기본적인 이해를 갖춰야 할 것들입니다: • JSX: HTML과 JavaScript가 혼합된 문법을 이해하고 작성할 수 있어야 합니다. • 컴포넌트: • 함수형 컴포넌트와 클래스형 컴포넌트 차이 이해 • 컴포넌트 재사용성과 컴포넌트 라이프사이클 관리 • Props와 State: • Props를 통한 데이터 전달과 컴포넌트 간의 데이터 흐름 • State를 통해 동적인 UI를 관리 • React Hooks: • useState, useEffect는 반드시 이해하고 활용할 수 있어야 합니다. • 추가로 useContext, useReducer, us..

react의 memo 기능. 이 전에도 반복해서 공부했듯이state의 값이 변할 때마다 전체를 랜더링 한다. 예시 사이트로 카운트 사이트가 있을 때플러스 버튼을 누르면 숫자가 올라간다고 하면숫자가 올라갈 때마다 저장된 state의 값이 변경되기 때문에계속해서 리랜더링이 되는 건데 이런 경우memo 기능이 도움을 준다. memo의 기능을 살펴봤을 때 아래처럼 memo로 감싸서 사용할 수 있는데 const Counter = memo(function Counter({ initialCount }) { log(' rendered', 1); const initialCountIsPrime = isPrime(initialCount); const [counter, setCounter] = useState(initi..

리액트를 공부하다 우연히 자동화 시스템 구축하는(Make)와 노코드로 웹/앱을 구축하는 Bubble이라는 사이트를 보고프론트앤드 개발자가 되는 것에 대한 막연한 불안감이 들기 시작했다. 리액트 공부를 멈추고 멍하니 두 가지 프로그램을 알려주는 강의 영상을 1시간 35분 동안 봤다.전부 다 본 후에도 이게 맞는지, 코드를 치지 않고 ai와 자동화된 시스템으로 사이트를 구축하는 방법이 맞는 건지 계속해서 의문이 들었고내가 하는 모든 과정들이 무의미하게 느껴졌다. 앞으로 ai가 더욱 발전될 텐데 지금 내가 하는 이 원초적이고 정통적인 방법이 맞는 건지혼란스러운 생각을 하는 과정을 겪었다. 약 2시간 정도를 소비하고 나서 다시 원점을 돌아왔다. 지금으로서는 저 두 가지 자동화 웹사이트에도 한계가 있고세부적인 웹..

React.StrictMode로 앱 개발을 해야 하는 이유... 우리가 build한 React 앱은 두 번 세 번 백 번 작동하더라도 에러 없이 똑같이 작동되어야 한다.그래서 개발할 때 스트릭모드를 아래와 같이 설정해 놓고 개발을 하면자동으로 두 번 실행을 시켜서 콘솔로그에 두번의 결과가 뜨는 것을 확인할 수 있고이 덕분에 에러를 쉽게 발견할 수 있다.import React from 'react'import ReactDOM from 'react-dom/client'import App from './App.jsx'import './index.css'ReactDOM.createRoot(document.getElementById('root')).render( ,) 위 StrictMode를 통해서 ..

퀴즈 미니 프로젝트를 만들면서React의 여러가지 기능들을 되돌아보는데, 한 가지 계속 반복해서 나오는 건 State 즉 useState에서여러가지의 useState를 만들어서 쓰는 것도 가능하지만 되도록이면하나의 useState에서 여러 데이터를 파생해서 쓰는 것이 React에서 유리하다. 예를들어,  const [userAnswer, setUserAnswers] = useState([]);이런 식으로 유저가 고른 정답들이 저장되는 useState를 만들었을때현재 몇 번 문제 인지, 몇 번 인덱스에 있는지 확인하기 위해서 const [index, setIndex] = useState(0); 이런식으로 만들 수 도 있지만미리 만들어둔 useAnswer에서 유저가 고른 정답 목록의 길이를 가져오면 인덱스를..

그 동안 React 하면서 놓쳤던 중요한 것들을 다시보자!각 함수들 사이에 Props 주고받기 button 관리 ex) handleClicker('components')}>Components 기본적으로 Button 컴포넌트에서 children으로 가운데 "Components"를 받을 수 있고export default function TabButton({ children, onSelected }) { return ( {children} );} -> children은 기본 옵션으로 {children}으로 값을 가져올 수 있음-> onClick 옵션으로 클릭 이벤트를 받아서 onSelected 함수 실행시켜서 보내주고 useState로 해당 버튼 관리하기.c..

React를 사용하는 이유가 뭘까? 기존의 Javascript와 React의 차이점을 알기 React는 더 유연하고 부드럽다 -> 모바일 app처럼그 이유는 리액트는 작성한 코드가 바로 화면에 보여지는게 아니고내부적으로 코드가 수정된 후 보여진다. 그러므로 더 빠르고 유연하게 화면을 띄워주고다양한 라이브러리들이 존재하고 요즘 많이 쓴다! 리액트는 build 프로세스를 사용한다  tip. 변수명을 짓는 방법Must not contain whitespace or special characters (except $ and _)Valid: $userName, age, user_name, data$,...Invalid: %userName, age/, user name,... May contain numbers b..