FRONT3 [React] 렌더링 상태 체크하기 (크롬 익스텐션 활용) 사실 이전에 리액트로 작업할 땐 렌더링상태를 체크할 수 있다는 사실을 몰랐기 때문에 어느 부분에서 렌더링이 되는지 몰랐었다. 하지만 막상 렌더링감지되는 기능을 깔아놓고 나니 나도 모르게 렌더링에 대해 신경을 많이 쓰게 되더라 이왕 하는거 최적화된 환경을 위해 설치 하는게 좋을 것 같았다. 크롬 웹스토어 https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi?hl=ko React Developer Tools Adds React debugging tools to the Chrome Developer Tools. Created from revision 28ce1c171 on 3/22/2023... 2023. 4. 9. [React] input 상태 업데이트 useState,useRef ref (reference) 에 대해 알아보자 ref 는 React에서 사용할 때, useRef 로 변수에 담아 사용이 가능하다. ref 기본기능을 간단하게 설명하자면 다른 DOM에 접근해서 작업이 가능하도록 해준다. ( 이외에도 활용되는 기능이 매우 많지만 input에 관해서만 적어내리도록 하겠다) useState 는 우리 모두가 알고 있듯이 React에서 상태를 관리할 수 있도록 도와주는 기능이다. // ref const ref = useRef(); // useState const [state, setState] = useState(null); useState는 이런식으로 상태가 관리된다 입력 > 상태함수 실행 > 함수로 인한 state값 업데이트 > input 필드 값 변경 ( ref에서 삭제가능 .. 2023. 4. 8. [React] createPortal 사용해 효율적으로 모달 관리해주기 모달은 어디에 넣어야 할까? 사실 퍼블리셔로 시작한 나로써는 최적화적인 면도 중요하지만 DOM 의 구조를 잘 파악하고 체계적이고 직관적인 구조로 짜는것이 가장 베스트의 코드라 생각한다. 특히나 모달의 경우는 머리로는 구현이 쉽지만 상태 모달부터 시작해 기능과 submit 모달 등등 다양한 기능을 가지고 있다. 실시간으로 뿜어져나오는 여러 모달을 처리하기엔 최적화적인 코드를 사용하고싶지만 그것도 쉽지않다. 구조적으로 하위 내용과 div 로 감싸진 곳에선 모달을 사용하지 않는 편이 좋다. css 코드를 만지다보면 가끔 z-index 를 무작위로 사용하는 경우가 많은데 이 점을 고려하지 않고 모달작업을 하면 상위 position에 맞춰 모달이 본인에 위치를 잃어버린다. 하위에서 아무리 z-index 를 우겨넣.. 2023. 4. 8. 이전 1 다음 반응형
