웹 개발 (97) 썸네일형 리스트형 React) Ref란? Ref What is Ref ? HTML에서는 DOM 마다 id로 이름을 달 수 있습니다. 리액트는 id 대신 reference의 줄임말인, ref로 이름을 달 수 있습니다. id는 unique해야 하는데 리액트에서는 컴포넌트 재사용이 많은데 이런 상황에서 id가 중복이 발생하기 때문에 리액트에서도 id를 사용할 수 있지만 사용을 권장하지는 않고 있습니다. 특수한 경우, id를 사용해야 한다면 id 뒷 부분에 추가 텍스트를 붙여 (btn 1, btn2,...) 중복 id 발생을 방지해야 합니다. When to use ref는 DOM을 직접 건드려야 할 때 사용하는 것입니다. 예를 들어 특정 input에 focus 주기 스크롤 박스 조작하기 canvas 요소에 그림 그리기 등 의 작업을 할 때에는 DOM에.. React) 간단한 비밀번호 검증 예제 Password Validation Password Validation source code /* validation.css */ .success{ background-color: lightgreen; } .failure{ background-color: lightcoral; } import React, { useState } from 'react'; import './validation.css'; const staticPassword = '0000'; const Validation = () => { const [password, setPassword] = useState(''); const [clicked, setClicked] = useState(false); const [validated, setValidated] = useState.. React) onKeyPress와 input 여러개 일 때onChange 이벤트 핸들링 onKeyPress and onChange with multiple input Event Handling source code import React, { useState } from 'react'; const EventHandling = () => { const [form, setForm] = useState({ username:'', message:'' }) const { username, message } = form; const handleChange = e => { const newForm = { ...form, // 기존의 form을 이 자리에 복사 [e.target.name] : e.target.value }; setForm(newForm); } const handleClick = () =>.. React) input onChange, button onClick 이벤트 핸들링 input onChange, button onClick Event Handling source code import React, { useState } from 'react'; const EventHandling = () => { const [message, setMessage] = useState(''); return ( Event Practice { setMessage(e.target.value) } } /> { alert(message); setMessage(''); } }>확인 ); } export default EventHandling; result npm start로 위 프론트엔드 코드를 브라우저에 띄우면 다음과 같은 화면이 보입니다. input 칸에 사용자가 텍스트를 입력하면 그 값이 val.. React) this.setState 끝난 후 특정 작업 실행 this.setState 끝난 후 특정 작업 실행 setState는 클래스형 컴포넌트에서 state의 상태를 변경하기 위해 사용하는 함수입니다. setState 함수를 실행시켜 state 값을 변경하는 작업을 마친 후에 특정 작업을 실행하도록 하고싶은 경우에는 setState의 두번째 파라미터로 콜백 함수를 등록하면 됩니다. ... { this.setState( {number: number + 1}, () => { ... callback 함수 ...} ); } } > + 1 ... 이렇게 setState의 첫번째 파라미터로 변경할 state 상태를 전달하고, 두번째 파라미터에 setState가 끝난 이후 callback함수를 작성하여 전달하면 됩니다. References 리액트를 다루는 기술(김민준) JSX) props 검증 : propTypes props 검증 : propTypes propTypes는 그동안 사용해본적은 없고 이번에 기술서를 읽으면서 처음 알게된 기능입니다. 여러 명의 개발자들이 협업하는 프로젝트의 경우, 또는 컴포넌트를 재사용할 수 있게 오픈해 놓은 경우 다른 개발자들이 사용할 때 컴포넌트를 본래 의도대로 잘 사용할 수 있도록 하기 위해 props에 전달해야할 값의 자료형을 지정해 놓는 것입니다. 다음과 같이 임포트 해줘야 사용할 수 있습니다. import PropTypes from 'prop-types'; 사용 방법은 defaultProps를 지정하는 방법과 같습니다. ... const Conpomenent = ({ name, extra }) => { return hello {name} {extra} ; } ... Compo.. ES6) 비구조화 할당 destructuring assignment 비구조화 할당 destructuring assignment 기본적으로 전달받은 props 컴포넌트에서 사용하는 방법은 다음과 같습니다. 인자로 props를 받고, props.{props값 명} 으로 사용합니다. 사용할때마다 굳이 props. 을 붙여주는 것은 불편하기 때문에 비구조화 할당 문법을 사용하는 것입니다. // 부모 컴포넌트 -> ... const Component = props => { return hello {props.name} ; } ... 비구조화 할당 방법 1 // 부모 컴포넌트 -> ... const Component = props => { const { name, extra } = props; return hello {name} {extra} ; } ... // hello worl.. JSX) props.children props.children 컴포넌트 태그는 대부분 props를 사용한다면, 다음과 같은 형식으로 호출합니다. 또는 다음과 같이 호출할 수도 있습니다. world 이렇게 컴포넌트 태그 사이에 전달된 world 라는 값은 Componenent 컴포넌트에서 사용하려면 props.children값을 사용하면 됩니다. ... const Component = props => { return hello {props.children} ; } ... 항상 그냥 props 값을 전달하기만 해서 이번에 책을 읽으며 처음 알게 된건데 사실 이걸 언제 사용해야 될지는 잘 모르겠습니다.;; References 리액트를 다루는 기술 (김민준) 이전 1 ··· 8 9 10 11 12 13 다음
