본문 바로가기

분류 전체보기126

useRef useRef useRef로 특정 DOM 선택하기 ★ DOM(문서 객체 모델): XML이나 HTML문서에 접근하기 위한 일종의 인터페이스, 이 객체 모델은 문서 내의 모든 요소를 정의하고, 각각의 요소에 접근하는 방법 제공 자바스크립트에서는 특정 DOM을 선택해야 하는 상황에 getElementById, querySelector 같은 DOM. Selector 함수를 사용해서 DOM 선택 리액트에서는 ref사용 함수형 컴포넌트: useRef라는 Hook 함수 사용 클래스형 컴포넌트: 콜백 함수 사용하거나 React.createRef라는 함수 사용 useRef사용 이유 값 저장: 현재 저장하고 싶은 값을 리렌더링 없이 저장 DOM 참조: DOM참조가능, 현재 DOM에서 element의 scroll위치, ima.. 2022. 11. 16.

리액트 Hooks - 리액트 16.8 이전 버전에서는 함수형 컴포넌트에서 상태를 관리할 수 없었지만, 리액트 16.8에서 Hooks라는 기능이 도입되면서 함수형 컴포넌트에서도 상태 관리할 수 있게 됨 이벤트 설정 import React from "react"; function Counter() { const onIncrease = () => { console.log("+1"); }; const onDecrease = () => { console.log("-1"); }; return ( 0 +1 -1 ); } export default Counter; - 이벤트 설정해줄 때, on이벤트이름={실행하고싶은함수} 형태로 설정 import React from "react"; import Counter from "./Counter.. 2022. 11. 15.

조건부 렌더링 더보기 조건부 렌더링: 특정 조건에 따라 다른 결과물을 렌더링하는 것 import React from "react"; import Hello from "./Hello"; import Wrapper from "./Wrapper"; function App() { return ( ); } export default App; import React from "react"; function Hello({ color, name, isSpecial }) { return ( {isSpecial ? * : null} 안녕하세요 {name} ); } Hello.defaultProps = { name: "이름없음", }; export default Hello; ✭ 삼항연산자를 사용한 조건부 렌더링을 주로 특정 조건에 따라 .. 2022. 11. 15.

리액트의 props props(properties): 어떠한 값을 컴포넌트에게 전달해주어야 할 경우 사용 - 컴포넌트의 속성을 설정할 때 사용하는 요소 - 읽기 전용 - 컴포넌트 자체 props를 수정하면 안됨 - 모든 React컴포넌트는 자신의 props를 다룰 때 반드시 순수 함수처럼 동작해야함 - 수정되는 것은 state 1. 컴포넌트에게 전달되는 props는 파라미터를 통해 조회 가능, props는 객체 형태로 전달됨 import React from "react"; import Hello from "./Hello"; function App() { return ; } export default App; import React from "react"; function Hello(props) { return 안녕하세요 {.. 2022. 11. 15.

이전 1 ··· 28 29 30 31 32 다음

티스토리툴바