분류 전체보기60 리액트의 ref와 useRef Ref 객체 생성 import { useRef } from 'react'; // ... const ref = useRef(); useRef 함수로 Ref 객체를 만들 수 있었습니다. ref Prop 사용하기 const ref = useRef(); // ... ... ref Prop에다가 앞에서 만든 Ref 객체를 내려주면 됩니다. Ref 객체에서 DOM 노드 참조하기 const node = ref.current; if (node) { // node 를 사용하는 코드 } Ref 객체의 current 라는 프로퍼티를 사용하면 DOM 노드를 참조할 수 있었습니다. current 값은 없을 수도 있으니까 반드시 값이 존재하는지 검사하고 사용해야 하는 점도 잊지 마세요! 예시: 이미지 크기 구하기 다음 코드는 i.. 2023. 11. 26. useState 사용법 정리 제가 지금까지 공부한 useState 사용법을 정리해보도록 하겠습니다. 초깃값 지정하기 const [state, setState] = useState(initialState); useState 함수에 값을 전달하면 초깃값으로 지정할 수 있었습니다. 콜백으로 초깃값 지정하기 const [state, setState] = useState(() => { // 초기값을 계산 return initialState; }); 이 방법은 여기서 처음 소개하는 내용인데요, 초깃값을 계산해서 넣는 경우 이렇게 콜백을 사용하면 좋습니다. 무슨 말인지 예시 코드로 한번 살펴볼게요. function ReviewForm() { const savedValues = getSavedValues(); // ReviewForm을 렌더링할 .. 2023. 11. 25. 리액트 조건부 렌더링 꿀팁 리액트에서 활용할 수 있는 조건부 렌더링에 대한 꿀팁 논리 연산자 활용하기 AND 연산자 import { useState } from 'react'; function App() { const [show, setShow] = useState(false); const handleClick = () => setShow(!show); return ( 토글 {show && 보인다 👀} ); } export default App; show 값이 true 이면 렌더링 하고, false 이면 렌더링 하지 않습니다. OR 연산자 import { useState } from 'react'; function App() { const [hide, setHide] = useState(true); const handleClick.. 2023. 11. 25. VSCode에서 자주 사용하는 기능 소개 자동완성 예를들어 handleIconClick 이라는 단어를 입력할 때 단어의 앞 부분인 hand 만 입력하거나 단어의 이니셜인 hic 만 입력하면 VSCode는 툴팁으로 단어를 추천해주는데요. 여기서 원하는 단어를 선택한 다음 Enter나 Tab 키를 눌러 단어를 완성할 수 있습니다. 단축키 멀티 커서 선택하기 텍스트 커서를 단어로 옮겨 놓으면 해당하는 변수나 함수가 하이라이팅되고, 텍스트를 선택하면 대소문자 구분없이 같은 단어가 하이라이팅되는데요. 이 상태에서 멀티 커서 선택을 하면 여러 군데를 한 번에 수정할 수 있습니다. 윈도우즈 맥 Ctrl + Shift + L Cmd + Shift + L 직접 멀티 커서 만들기 원하는 위치에 텍스트 커서를 만들 수 있습니다. 윈도우즈 맥 Alt + 클릭 Opt.. 2023. 11. 24. 이전 1 2 3 4 5 6 ··· 15 다음