728x90 반응형 Front_end/React13 React) useRef - 컴포넌트의 width ref.current.offsetWidth; // 렌더가 된 컴포넌트만 가져올 수 있다 2022. 4. 20. React) 리액트에서의 this와 select() 문자열 전체 선택 리액트에서의 this 리액트는 가상 DOM을 이용하기 때문에 자바스크립트에서의 this와 다르다 리액트의 가상 DOM은 this가 root 컴포넌트를 바라보고 있다 자바스크립트에서는 해당 시점의 엘리먼트를 가리키고 있다 event 객체 리액트에서는 이벤트 객체를 호출하여 this의 역할을 수행할 수 있다 보통 this를 사용할 때는 이벤트 리스너에서 사용하기 때문에.. e.target.select()} />select()는 자바스크립트에서 this.select() 로 사용하여 해당 엘리먼트에 포함된 문자열을 전체 선택하는 기능 2022. 4. 13. React) 리액트 css와 styled-components 가상선택자 적용 리액트에서의 css 보통 리액트는 프레임워크가 아니라고 한다 리액트는 라이브러리이기 때문에 어떤 곳에서도 사용될 수 있다 css도 마찬가지다 프레임워크라면 정해진 룰을 지켜서 작성해야만 동작하겠지만 라이브러리이기 때문에 어떤 종류의 css style도 적용할 수 있다 -> 해보고 안되면 다른 방식으로 넣으면 됨.. styled-components 가상 선택자 적용 SCSS식 표현을 사용할 수 있다 const Div = styled.div` width:300px; height:300px; &:hover { background-color : skyblue; } ` 다른 컴포넌트와 연결 가능 const Div2 = styled(Div)` // Div 컴포넌트 상속 ${Div}:hover & { // Div 컴.. 2022. 4. 13. React) select, option로 셀렉트 메뉴 사용 const [value, setValue] = useState('coconut'); function handleChange(event) { setValue(event.target.value); } Grapefruit Lime Coconut Mango 2022. 3. 22. 이전 1 2 3 4 다음 728x90 반응형