React Portal 부모 컴포넌트의 DOM 계층 구조 바깥에 있는 DOM 노드로 자식을 렌더링하는 방법을 제공함 모달 창을 만들 때 주로 사용됨 ReactDOM.createPortal(child, container) child : 렌더링할 수 있는 리액트 자식 요소 container : DOM 엘리먼트 자식 컴포넌트의 z-index 가 부모 컴포넌트보다 높더라도 부모 컴포넌트가 더 위로 올라오는 문제 해결 가능 index.html 에서 Container 생성 createPortal 사용 import React from 'react'; import ReactDOM from 'react-dom'; const Modal = ({ open, children, onClose }) => { if (!open) ..

forwardRef 컴포넌트에 ref prop을 전달해서 해당 컴포넌트 내부에 있는 DOM 에 접근을 가능하게 해줌 import { useRef } from 'react'; function App() { const inputRef = useRef(); const handleClick = () => { inputRef.current.focus(); }; return ( 클릭 ); } export default App; 버튼 클릭 시 input 요소가 정상적으로 focus 됨 import React from 'react'; const ChildComponent = ({ ref }) => { return ; }; export default ChildComponent; import { useRef } from ..

useRef 1. 변수 관리 시 사용 2. 특정 DOM 선택 시 사용 변수 관리 state 를 사용해서 state 가 변경되면 컴포넌트가 다시 렌더링됨 ref 를 사용하면 ref 가 변경되어도 다시 렌더링되지 않음 ref 값은 생명주기 동안 유지됨 useRef vs useState vs let import { useRef, useState } from 'react'; function App() { const [count, setCount] = useState(0); const countRef = useRef(0); let countVariable = 0; const increaseRef = () => { countRef.current++; }; const increaseState = () => { set..

문제 링크 https://school.programmers.co.kr/learn/courses/30/lessons/118666 프로그래머스 코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요. programmers.co.kr 나의 문제 풀이 function solution(survey, choices) { let answer = ''; const types = ['RT', 'CF', 'JM', 'AN']; const score = { R: 0, T: 0, C: 0, F: 0, J: 0, M: 0, A: 0, N: 0 }; choices.forEach((choice, idx) => { const [disag..

문제 링크 https://school.programmers.co.kr/learn/courses/30/lessons/142086 프로그래머스 코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요. programmers.co.kr 나의 문제 풀이 function solution(s) { var answer = [-1]; for (let i = 1; i = 0; j--) { if (s[i] === s[j]) { answer.push(i - j); break; } else if (j === 0) { answer.push(-1); break;..

useRef 변수 관리 시 사용 특정 DOM 선택 시 사용 state를 사용해서 state가 변경되면 컴포넌트가 다시 렌더링 됨 하지만 ref를 사용하면 렌더링 되지 않음 자바스크립트 getElementById, querySelector 같은 DOM Selector 함수를 사용해 DOM을 선택함 리액트 ref를 이용해 DOM을 선택함 DOM을 직접 선택해야 하는 경우 요소에 포커스를 설정해 주어야 할 경우 요소의 크기를 가져와야 할 경우 스크롤바 위치를 가져와야 할 경우 ... useRef 사용법 useRef()를 이용해 Ref 객체를 만듦 이 객체를 특정 DOM애 ref 값으로 설정함 Ref 객체의 .current 값이 특정 DOM을 가리키게 됨 // Ref 객체를 만듦 const ref = useRe..