React

---

회원폼 만들기

🕵️‍♀️이번 수업은 클래스형 컴포넌트로 회원폼의 기초를 구현해보려고 한다.

input태그를 활용하고 onChange메서드를 사용하여 입력된 값을 state에 넣고 목록에 나타나게 한다.

👨‍💻 코드를 순서대로 복습하면서 작성을 하겠다.

---

AppComponent (최상위 컴포넌트)

클래스형 컴포넌트를 만들어준다.

class App extends React.Component {
  constructor(props){
  	super(props);
 🚨 this.inputRefId=React.createRef(); 🚨
 	this.state={
      id:"",
      name:"",
      pw:"",
      member:[], 👈 객체 타입
  	}
  }

우선 생성자함수로 constructor(props) 와 super(props)를 써주고 state 초기값을 써준다.

🚨 에 있는 코드는 추후에 작성된 코드인데, DOM에 직접 접근하는 방법이다. 여기에서 사용하는 이유는 렌더링되자마자 input에 포커스를 하기 위함이다.
(자세한 내용은 시리즈 궁금증를 통해 작성하겠다.)

---

render()

위에서 초기값 state를 만들어 두고 render에 와서 rerurn문 안에 input과 button을 만들어준다.

 render() {
        return (
            <div id='app'>
                <h1 style={{color:'#f00',textAlign:'center'}}>회원가입 입력 폼</h1>
                <form onSubmit={this.onSubmitForm} action='member.php' method='post' name='member' id='member' >
                    <div>
                        <input style={styleInput} type="text" placeholder='아이디을 입력하세요' value={this.state.id} onChange={this.onChangeId} ref={this.inputRefId}/>
                    </div>
                    <div>
                        <input style={styleInput} type="text" placeholder='이름을 입력하세요' value={this.state.name} onChange={this.onChangeName} />
                    </div>
                    <div>
                        <input style={styleInput} type="password" placeholder='비밀번호를 입력하세요' value={this.state.pw} onChange={this.onChangePw}/>
                    </div>
                    <div>
                        <button type="submit" >전송</button>
                    </div>
                </form>
                <MemberComponent member={this.state.member}/>
            </div>
        );
    }

전체는 <div id='app'></div> 가 감싸고 있고 차례대로 h1의 타이틀 다음 form태그가 있다.

---

1. form
<form> 태그 속성은 onSubmit과 action , method , name , id 가 들어있다.

#1. onSubmit : {this.onSubmitForm}

  onSubmitForm 함수  

onSubmitForm = (e) => {
        e.preventDefault();
        this.setState({
            member:[
                ...this.state.member,
                {
                    id:this.state.id,
                    name:this.state.name,
                    pw:this.state.pw
                }
            ]
        })
  		this.setState({
            id:'',
            name:'',
            pw:''
        })
     🚨 this.inputRefId.current.focus(); 🚨
}

매개변수에 event의 의미인 e를 넣어주고 e.preventDefault를 한다. (이는 지금은 단순하게 구현만 하는 단계이기 때문에 submit 버튼을 누르면 다음페이지로 넘어가는 것을 방지하기 위함이다.)
this.setState 입력된 변한 값을 넣어주는 setState인데 초기값으로 만든 state에 전개연산자로 이어서 누적 되어야 한다. ...this.state.member 를 작성한다. 다음 초기값으로 만들어진 id , name , pw 를 this.state에 넣어 setState값을 넣는다.
그다음 submit이 되고나면 기존 input태그에 입력된 값은 데이터로 들어가게 되고 input의 입력값은 '' 빈 공백으로 만들기 위해 setState값은 id , name , pw 가 ''공백 이 되게 한다.

🚨 이 있는 코드는 submit이 되고 setState값이 '' 공백이 된 다음 다시 input 첫번째 태그에 커서가 포커싱 되기 위함이다.

---

#2. action : 'member.php'

form의 action속성은 폼을 전송할 서버 쪽 스크립트 파일을 지정하는 기능이다. (원래는 php 데이터베이스에 데이터를 넣어주는 기능이지만 간단한 구현을 위해 적어두기만 함)

---

#3. method : 'post'

method 속성은 폼 데이터(form data)가 서버로 제출될 때 사용되는 HTTP 메소드를 명시한다.

• get : URL에 폼 데이터를 추가하여 서버로 전달하는 방식
• post : HTTP 요청은 브라우저에 의해 캐시되어(cached) 저장

회원의 정보를 입력받아 저장되므로 post방식으로 한다.

---

#4. name : 'member'

name의 속성은 해당 폼(form)의 이름을 명시한다.

---

이상 감싸고 있는 form의 구성은 이렇고 그안의 input를 알아본다.

2. input

form태그안에 div로 감싸진 input 태그이다. 먼저 우리가 사용 할 input의 종류는

1. 아이디 입력
2. 이름 입력
3. 비밀번호 입력

이 있다.

input의 태그 속성에는 style과 type , placeholder , value , onChange , ref 가 들어있다.

---

#1. style : {styleInput}

  styleInput  

const styleInput={
    width:'200px',
    height:'30px',
    padding:'5px 10px',
    marginBottom:'5px',
    boxSizing:'border-box'
}

---

#2. type : 'text' or 'password'
input의 타입 속성이다. 타입의 종류는 많은데 간단하게는

• button
• checkbox
• color
• date
• email
• file
• image
• number
• password
• radio
• range
• submit
• text

등이 있다. 우리는 여기서 text 타입과 password를 사용한다.

---

#3. placeholder : ...를 입력하세요

placeholder 속성은 입력 필드에 사용자가 적절한 값을 입력할 수 있도록 도와주는 짧은 도움말을 명시한다.

ex ) 아이디를 입력하세요 , 비밀번호를 입력하세요 ... 등

---

#4. value : {this.state.XX}
value속성은 요소의 값(value)을 명시한다. 초기 state값은 ""공백 이기 때문에 공백이고 placeholder가 보인다.

처음 렌더링이 되면 초기 세팅된 this.state의 값을 받아오고 submit 버튼을 누르게 되면 onSubmitForm의 함수가 실행되면서 마지막에 넣은 코드인 setState 공백 초기화로 인해 공백이 계속 유지되게 된다.

---

#5. onChange : {this.함수}

onChange 이벤트는 요소 변경이 끝나면 발생한다.

텍스트 입력 요소인 경우에는 요소 변경이 끝날 때가 아니라 포커스를 잃을 때 이벤트가 발생

  onChange 함수  

#name : onChange 이벤트 함수

onChangeName = (e) => {
		this.setState({
    	name:e.target.value 
    	});
	}

#id : onChange 이벤트 함수

onChangeId = (e) => {
		this.setState({
    	id:e.target.value
    	})
    }

#pw : onChange 이벤트 함수

onChangePw = (e) => {
        this.setState({
        pw:e.target.value
        })
    }

함수명은 onChangeName , Id , Pw 로 구분했다.
매개변수 event 의미인 e를 넣어주고 this.setState 변하는 값으로 e.target.value 를 적어준다.

*console.log로 확인하면 input태그에 text로 입력하면 콘솔창에 입력값이 나타나고 확인가능하다.

---

#6. ref : {this.inputRefId}
ref 속성은 특정 DOM에 작업을 해야 할 때 ref를 사용한다. (DOM을 직접적으로 건드려야 할 때)

위에서 생성자함수 constructor 를 만들고 안에 this.inputRefId=React.createRef(); 만들었었다.

처음렌더링 될 때, 그리고 submit 버튼이 눌러지고 나서도 포커스가 되게 넣어준다.

---

3. button
button을 일단은 type을 submit으로 해놓았고, 위에 form태그 설명글에 적은onSubmitForm 함수가 실행된다.

---

MemberComponent (하위 컴포넌트)

AppComponent의 하위 컴포넌트이다.

회원의 입력정보를 테이블로 나타나게 하려고 만든 컴포넌트이다.

[중요] props 하위컴포넌트 전달

AppComponent의 return문 안에 form태그 아래에 회원의 입력정보가 나타나야 하므로

<MemberComponent member={this.state.member}/>

로 props를 하위속성인 MemberComponent로 전달한다.

---

1. render

class MemberComponent extends React.Component {
    render() {
        const memberList = this.props.member.map((item, idx) => {
            return(
                <tr key={idx+1}>
                    <td>
                        {idx+1}
                    </td>
                    <td>{item.id}</td>
                    <td>{item.name}</td>
                    <td>{item.pw}</td>
                </tr>
            )
        });
        return (
            <div id="list">
                <table style={{border:'1px solid #000',borderCollapse:'collapse',width:'400px',padding:'20px'}}>
                    <thead>
                        <tr>
                            <th style={{border:'1px solid #000'}}>번호</th>
                            <th style={{border:'1px solid #000'}}>아이디</th>
                            <th style={{border:'1px solid #000'}}>이름</th>
                            <th style={{border:'1px solid #000'}}>비밀번호</th>
                        </tr>
                    </thead>
                    <tbody>
                        {memberList}
                    </tbody>
                </table>
            </div>
        );
    }
}

memberList

memberList라는 변수를 생성하고 this.props.member (onSubmitForm함수에 setState값인 member)를 내려받고 map함수를 만든다. 매개변수에는 item 과 idx(순번)을 담아주고 return문 에 <tr> , <td>가 들어간다.

---

🕵️‍♀️[TIP] : map함수를 사용하여 반복문이 돌아갈때는 유니크한 key 값이 필요하다.

👇 key 값을 넣지 않으면 아래와 같은 경고가 뜬다 👇

그래서 동일한 키값이 반복되는게 아닌 주로 index값을 많이 넣는다.

ex ) key={idx+1} , key={idx} 등..

---

<tr key={idx+1}>{
    <td>{idx+1}</td>
    <td>{item.id}</td>
    <td>{item.name}</td>
    <td>{item.pw}</td>
</tr>

이렇게 tr , td 태그로 구성을 하고 내용은

#1. {idx+1} : 인덱스 넘버는 0부터 시작을 한다. 그래서 1부터 시작하는 순번을 나타나게 하기 위해 +1을 한 값을 나타나게한다.

#2. {item.id} : 매개변수 item이 갖고 있는 member 이다. member안에 id를 호출한다.

#3. {item.name} : 매개변수 item이 갖고 있는 member 이다. member안에 name을 호출한다.

#4. {item.pw} : 매개변수 item이 갖고 있는 member 이다. member안에 pw를 호출한다.

변수 memberList의 맵함수와 return문을 담은 코드이다. 이제 화면에 테이블이 나올 return문을 보자

<div id="list">안에 table이 있다.

table syle

style={{
	border:'1px solid #000',
	borderCollapse:'collapse',
    width:'400px',
    padding:'20px'
    }}

thead

thead부분이다. 제일 첫번째 행이며 해당하는 목록을 나타낸다. <tr> (1줄) 안에 <th> 가 들어가고 각 번호 , 아이디 , 이름 , 비밀번호가 들어간다.

tbody

tbody부분이다 이제 위에 만들어 놓은 변수 memberList 가 이자리에 들어오게 된다.

<tbody>
	{memberList}
</tbody>

---

componentDidMount(){
        console.log('3 생명주기 componentDidMount'); /* 이렇게 실험을 하면 1,2 다음 array [] 다음 3번이 실행된다. */
        this.inputRefId.current.focus(); // 이렇게 쓰고 84번줄 input에 ref 를 쓴다 ref={this.inputRefId}
    }