Coding Apple, React 강좌 내용 정리.8 - 리액트에서 사용자의 input 처리

저번내용 & 소스

React 강좌 내용 정리.7 - UI 제작패턴 (props 등 이용) ; full source 포함

 

<input> 태그를 사용

사용자가 input에 입력한 값을 state로 저장해보기

 

1. 먼저 저장공간을 만들어두기

let [입력값, 입력값변경] = useState(''); // '' 값으로 초기화한 "입력값"

 

2. 뭔가 입력이 될 때 안의 함수가 실행된다

<input onChange={ ()=> { console.log('Hello')} }></input>

 

사용자가 입력한 값? e.target.value

<input onChange={ (e)=> {console.log(e.target.value)} }></input>

결과값

사용자 입력값을 console창에 출력

3. 확인을 했으니, state값 저장, 변경

<input onChange={ (e)=> { 입력값변경(e.target.value)} }></input>

 

map반복문으로 돌린 html에는 key={}가 필요

// i : 반복문의 index
        글제목.map( function(글, i){
          return (
            <div className="list" key={i}>