key & form

리액트에서의 키는 리스트에서 아이템을 구분하기 위한 고유한 문자열!

리액트에서의 키의 값은 같은 리스트에 있는 엘리먼트 사이에서만 고유한 값이면 됨.

 

그럼 실제로 고유한 키값을 어떻게 만들어서 사용해야하는지 봐보자고

이건 키값으로 숫자의 값을 사용한 것임.

const numbers =[1,2,3,4,5];
const listItems=numbers.map((number) => 
	<li key={number.toString()}>
    	{number}
    </li>
);

 

다음은 키값으로 id를 사용하는 방식

const todoItems = todo.map((todo) => 
	<li key={todo.id}>
    	{todo.text}
    </li>
);

 

 

이번엔 키값으로 인덱스를 사용하는 방법

리액트에서는 키를 명시적으로 넣어주지않으면 기본적으로 이 인덱스 값을 키값으로 사용함.

const todoItems = todos.map((todo,index) => 
	<li key={index}>
    	{todo.text}
     </li>
 );

 

그럼 이걸 활용해서 출석부 컴포넌트를 만들어보자고

 

다음은 폼이란 무엇인가?

보통 회원가입하거나 로그인할때 텍스트를 입력하는 양식 많이 보이는데 텍스트 입력뿐 아니라 체크박스나 셀렉트등 사용자가 무언가 선택을 해야 하는것 모두를 폼이라고 생각하면됨.

정리하면 사용자로부터 입력을 받기 위해 사용하는것

 

제어 컴포넌트는 사용자가 입력한 값에 접근하고 제어할 수 있도록 해주는 컴포넌트입니다.

말한 그대로 누군가의 통제를 받는 컴포넌트인데 여기서 통제를 하는게 리액트임

정리하자면 제어 컴포넌트는 그 값이 리액트의 통제를 받는 입력 폼 엘리먼트를 의미함.

제어 컴포넌트는 모든 데이터를 state에서 관리함.

 

자 그러면 사용자의 이름을 입력받는 html 폼을 리액트의 제어 컴포넌트로 만들어보자

function NameForm(props) {
	const [value, setValue] = useState('');
    
    const handleChange = (event) => {
    	setValue(event.target.value);
     }
     
     const handleSubmit = (event) => {
     	alert('입력한 이름:' + value);
        event.preventDefalut();
      }
     
     return (
     	<form onSubmit={handleSubmit}>
        	<lable>
            	이름:
                <input type="text" value={value} onChange={handleChange} />
             </lable>
             <button type="submit">제출</button>
        </form>
     )
  }

이 코드에서 input태그의 value={value}부분을 볼 수 있는데 리액트 컴포넌트의 state에서 값을 가져다 넣어주는 것이다.

그래서 state의 값이 항상 input에 표시가된다.

또한 입력값이 변경되었을때 호출되는 onChange={handleChange}처럼 handleChange함수가 호출되도록 했는데 handleChange함수에서는 setValue()함수를 사용하여 새롭게 변경된 값을 value라는 state에 저장한다.

 

만약에 사용자가 입력한 모든 알파벳을 대문자로 변경시켜서 관리하고싶으면

const handleChange = (event) => {
	setValue(event.target.value.toUpperCase());
 }

이렇게 해주면되는데 handleChange함수로 들어오는 이벤트의 타겟값을 toUpperCase() 함수를 이용하여 모두 대문자로 변경한 후에 그 값을 state에 저장하는 것이다. 이처럼 제어 컴포넌트로 사용자의 입력을 제어할수있다.

 

다음은 여러줄에 걸쳐서 나올 정도로 긴 텍스트를 입력받기 위한 html태그인 textarea태그이다.

반면에 리액트에서는 textarea태그에 value라는 attribute를 사용하여 텍스트를 표시한다.

아래 코드를 보면서 이해해보자

function RequestForm(props) {
	const [value,setValue] = useState('요청사항을 입력하세요');
    
    const handleChange = (event) => {
    	setValue(event.target.value);
     }
    
    const handleSubmit = (event) => {
    	alert('입력한 요청사항:'+value);
        event.preventDefalut();
    }
    
    return (
    	<form onSubmit={handleSubmit}>
        	<lable>
            	요청사항:
                	<textarea value={value} onChange={handleChange} />
            </lable>
            <button type="submit">제출</button>
        </form>
     )
 }

이건 이름같은 적은 텍스트의 입력을 받는게아닌 요청사항처럼 많은 텍스트의 입력을 받는 컴포넌트인데 이건 아마 곧 시작하게될 플젝에서 쓸듯..?

뭐암튼 state로는 value가 있으며 이 값을 textarea라는 태그의 value라는 attribute에 넣어줌으로써 화면에 나타나게되는데 이때 useState에서 보이는것과같이 초깃값으로 요청사항을 입력하세요를 넣어줌! 

이래서 렌더링될때부터 textarea에 텍스트가 나타남.

 

select태그

드롭다운 목록을 보여주기 위한 html태그임.

이건 여러가지 옵션중에서 하나를 선택할수있는 기능을 제공함!

html에서는 아래와같이 사용함.

<select>
	<option value="apple">사과</option>
    <option value="banana">바나나</option>
    <option value="grape">포도</option>
    <option value="watermelon">수박</option>
</select>

 

그럼 리액트에서는 어떻게 쓰일까?

function FruitSelect(props) {
	const [value,setValue] = useState('grape');
    
    const handleChange = (event) => {
    	setValue(event.target.value);
    }
    
    const handleSubmit = (event) => {
    	alert('선택한 과일:'+value);
        event.preventDefalut();
    }
    
    return (
    	<form onSubmit={handleSubmit}>
        	<label>
            	과일을 선택하세요:
                <select value={value} onChange={handleChange}>
                	<option value="apple">사과</option>
                    <option value="banana">바나나</option>
                    <option value="grape">포도</option>
                    <option value="watermelon">수박</option>
                 </select>
             </label>
             <button type="submit">제출</button>
         </form>
      )
  }

FruitSelect라는 컴포넌트가 있고이 컴포넌트의 state로 grape라는 초기값을 가진 value가 하나 있다. 

이 값을 select 태그에 value로 넣어주고 있다. 

값이 변경된 경우에는 위와 마찬가지로 handleChange함수에서 setValue함수를 사용하여 값을 업데이트한다.

이 방식을 사용하게 되면 사용자가 옵션을 선택했을때 value라는 하나의 값만을 업데이트 하면 되기 때문에 더 편리하다.

만약 다중으로 선택이 되게 하려면 아래와같이 multiple속성값을 true로 해주고 value로 선택된 옵션의 값이 들어있는 배열을 넣어주면됨.

 

<select multiple={true} value={['B','C']}>

 

file input태그

말 그대로 디바이스의 저장 장치로부터 사용자가 하나 또는 여러개의 파일을 선택할 수 있게 해주는 html태그임.

서버로 파일을 업로드하거나 자바스크립트의 file api를 사용하여서 파일을 다룰때 사용함

<input type="file" />

이런식으로 사용함.

 

그렇다면 지금까지는 하나의 컴포넌트에서 하나의 입력만을 다뤘는데 만약 하나의 컴포넌트에서 여러개의 입력을 다루기 위해서는 어떻게 해야할까?

 

이런 경우에서는 여러개의 state를 선언하여서 각각의 입력에 대해 사용하면됌.

 

앞에처럼 제어 컴포넌트에 value prop을 정해진 값으로 넣으면 코드를 수정하지 않는한 입력값을 바꿀수없음.

하지만 만약 value prop은 넣되 자유롭게 입력할 수 있게만들고싶으면 값에 undefined or null을 넣어주면됌.

 

ReactDOM.render(<input value="hi" />, rootnode);

setTimeout(function() {
	ReactDOM.render(<input value={null} />, rootNode);
 }, 1000);

처음에는 input의 값이 hi로 정해져있어서 값을 바꿀 수 없는 입력 불가 상태였다가 timer에 의해 1초뒤에 value가 null인 input태그가 렌더링 되면서 입력 가능한 상태로 바뀜.

이 방법을 잘 활용하면 value prop을 넣으면서 동시에 사용자가 자유롭게 입력 할 수 있게 만들기 가능.

 

그럼 한번 사용자 정보를 입력받는 가입 양식 컴포넌트를 한번 만들어보자

가입 입력 양식을 제출 이런식으로 간단하게 짜줌.