개미군이 웹서핑을 하다가 어떤 사이트 회원가입을 하게됐음
취미를 입력하는데 입력칸이 하나 있고 옆에 + 버튼이 있는거임
개미군은 취미가 48개쯤 되는지라 + 버튼을 마구 눌러서 취미를 계속 추가했음
자, 요런 로직을 React에서 만들어봅시다!
1. state안에 현재 몇개의 인풋박스가 존재하는지 저장 (처음에 1, + 누를때마다 1씩 추가)
-변수이름은 howManyInputFields 라고 하겠음
2. render() 안에서 for 문을 돌려서 this.state.howManyInputFields 만큼 Input Field 를 array에 저장
3. JSX 로 위에서 생선한 Input Field를 뿌려줌
-- 여기까지 하면 레이아웃 완성, 밑에는 데이터 저장하는 내용 --
4. Input field 에 onChange 생성해서 handleChange 연결시키는데 원래 들어있는 param인 event 이외에 for문에서 쓰이고 있는 index 값 보통 i로 쓰니 i라고 하겠음. 이 i를 param으로 넘겨줌
예시 : onChange={() => handleChange(i)}
5. 첫번째 Input field에서 글을 쓰면 i는 0일 거고, 두번째에서 쓰면 i는 1이겠쥬 - handleChange 함수에서 i를 받아서 state안에 알맞은 곳에 저장하면 끝~
취미를 입력하는데 입력칸이 하나 있고 옆에 + 버튼이 있는거임
개미군은 취미가 48개쯤 되는지라 + 버튼을 마구 눌러서 취미를 계속 추가했음
자, 요런 로직을 React에서 만들어봅시다!
1. state안에 현재 몇개의 인풋박스가 존재하는지 저장 (처음에 1, + 누를때마다 1씩 추가)
-변수이름은 howManyInputFields 라고 하겠음
2. render() 안에서 for 문을 돌려서 this.state.howManyInputFields 만큼 Input Field 를 array에 저장
3. JSX 로 위에서 생선한 Input Field를 뿌려줌
-- 여기까지 하면 레이아웃 완성, 밑에는 데이터 저장하는 내용 --
4. Input field 에 onChange 생성해서 handleChange 연결시키는데 원래 들어있는 param인 event 이외에 for문에서 쓰이고 있는 index 값 보통 i로 쓰니 i라고 하겠음. 이 i를 param으로 넘겨줌
예시 : onChange={() => handleChange(i)}
5. 첫번째 Input field에서 글을 쓰면 i는 0일 거고, 두번째에서 쓰면 i는 1이겠쥬 - handleChange 함수에서 i를 받아서 state안에 알맞은 곳에 저장하면 끝~
Comments
Post a Comment