[ React 02 ] React Component 문법, 반복문 - Map, for, Props, input을 받아서 데이터처리, 옛날에 react 사용법

1. Modal 창 만들기 - React Component 문법

: HTML을 한 단어로 줄여서 쓸 수 있는 방법

 

1) Component

- Component 만드는 법

1. 함수를 만들고 이름을 짓는다.

2. 축약을 원하는 HTML을 넣는다.

3. 원하는 곳에서 <함수명/> 을 적는다. 

      ....
      </div>
      <Modal></Modal>
    </div>
  );
}

// 컨포넌트 만들기
function Modal(){
  return(
      <div className = "modal"> 
        <h2>제목</h2>
        <p>날씨</p>
        <p>상세 내용</p>
      </div>
  )
}

 

- 컴포넌트 만들때의 주의사항.

1. 대문자로 시작해서 만든다. 소문자는 사용하지 않는다.

2. return() 안에 있는 것은 태그를 하나로 묶어야한다. 여러개의 태그가 나열되서는 안된다. 

      - 만약 reuturn() 내부를 묶을 때 의미없는 div 를 사용하기 싫으면 <> </> 를 사용한다. 

3. 만드는 위치는 function App() 와 같은 위치에 넣으면 된다. 

 

- 컴포넌트를 만드는 기준

1. 반복출현하는 html 덩어리

2. 자주 변경되는 html UI

3. 다른 페이지 만들 때는 컴포넌트로 만듦

 

- 컴포넌트를 많이 만들면 단점

1. state을 사용할 때 , 복잡해짐.

    - 그 이유는 function 안에 변수를 선언했을 때, 밖에서 그것을 사용하려면 조금 불편함

    - 상위 component에서 만든 state를 이용하려면 props문법을 이용해야함 

 

 

2) 상황에 따라 modal 보이도록 하기 ( 삼중 if 문 ) 

a. 먼저 model의 상태가 true 면 보이게 하는 if 문 만들기

{
        modal === true  // 조건 
        ?  <Modal></Modal>  // 참
        : null  // 거짓
      } 

b. state 를 우선은 false 로 선언하기

let [modal, modal변경] = useState(false);

 

c. 글 제목을 클릭하면 modal 이 등장하는 코드를 작성하기.

- 즉, modal 이 false -> true로 변경됨

<h3 onClick={() =>{modal변경(true)}}> {글제목[2]} </h3>

 

d. 열고 닫는 버튼을 만들기 위해서 사용하는 코드

: ! 는 true 왼쪽에 붙이면 false로 바꿔주고, false왼쪽에 붙이면 true로 바꿔준다. 

따라서, 지금의 modal상태를 반대로 바꿔주는 기능을 한다. 

<div>
        <button onClick= { ()=>{modal변경(!modal)}}>열고 닫는 버튼</button>
</div>

 

* 전체 코드

function App() {
  let [modal, modal변경] = useState(false);
  
    return (
    <div className="App">
      <div className='black-nav'>
        <div> 개발 Blog</div>
      </div>
      <div className="list">
        <h3 onClick={() =>{modal변경(true)}}> {글제목[2]} </h3>
        <p> 2월 19일 발행 </p>
        <hr/>
      </div>
 
      {
        modal === true
        ?  <Modal></Modal>
        : null
      } 
      
    </div>
  );
}

 

2. 반복문 - Map, for

: map 함수는 array 에 사용하는 것

- map 함수 사용하기. 

function App() {
  let [글제목,글제목변경] = useState(['남자코트추천','젤리 맛집','요거트맛집' ]); 
  let [좋아요, 좋아요변경] = useState(0)
 
 ...

{ 
  글제목.map(function(i){
    return (
      <div className="list">
      <h3> {i} <span onClick={ () => {좋아요변경(좋아요[0]+1)} }>👍</span> {좋아요[0]} </h3>
      <p> 2월 17일 발행 </p>
      <hr/>
      </div>
    )
  })
}

: 위에 같이 코드를 만들게 되면, 리스트에 따라서 반복해서 만들어주게된다. 

그러나, 좋아요 버튼의 숫자같은경우, 한개의 값을 공유하기 때문에 값이 똑같이 변경되게 된다.. 

이것을 해결하는 방법은 추후에 다시 언급..! 

 

 

- map 함수를 쓸때는 key 를 적어주어야, warning이 뜨지않음 

{ 
        글제목.map(function(글,i ){
          return (
          <div className="list" key ={i}>
          
 }

 

 

- for 함수 사용하기

  function 반복된UI(){

    var 어레이 = [];
    for (var i =0; i < 3; i++){
      어레이.push(<div>안녕</div>)
    }
    return 어레이
  }
  
  .. 
  return{
  {
        반복된UI()
      }
      
 }

 

: 하지만 보통 map 을 더 자주 사용하기 

 

3. Props 

: 자식이 부모의 state를 가져다쓰고 싶을 때 사용하는 것

  App 은  부모 컴포넌트, Modal 은 자식 컴포넌트 

* function Modal(props) : 부모에게 전달받은 props는 다 여기에 들어있음

 

- props로 자식에게 state전해주는 법

1. < 자식컴포넌트 작명 = {state명} / >

 {
        modal === true
        ?  <Modal 글제목={글제목}></Modal>
        : null
 } 

2. 자식컴포넌트에서 props 파라미터 입력후 사용 - 데이터 바인딩 

function Modal(props){
  return(
      <div className = "modal"> 
        <h2>{ props.글제목[0]} </h2>
        <p>날씨</p>
        <p>상세 내용</p>
      </div>
  )

 

- 글을 누르면, 아래 modal의 제목이 글제목으로 바뀌는 코드

: 여기서 중요한 포인트는 1. props를 사용한다. 2. map(funciotns(글, i)) 에서 , i 는 index 번호를 가리킨다. 

   ...
   </div>      
        { 
          글제목.map(function(글,i ){
            return (
            <div className="list">
            <h3 onClick={ () => {누른제목변경(i)}}> {글} <span onClick={ () => {좋아요변경(좋아요+1)} }>👍</span> {좋아요} </h3>
            <p> 2월 17일 발행 </p>
            <hr/>
          </div>
          )
          })
        }
  <div>
 	...
      {
        modal === true
        ?  <Modal 글제목={글제목} 누른제목={누른제목}></Modal>
        : null
      } 
      
    </div>
  );
}



function Modal(props){
  return(
      <div className = "modal"> 
        <h2>{ props.글제목[props.누른제목]} </h2>
        <p>날씨</p>
        <p>상세 내용</p>
      </div>
  )
}

 

4. input을 받아서 데이터처리

1. 인풋 데이터 받기

      <input></input>

 

2. 인풋데이터를 다른 변수에 저장하기

a. 빈 state를 만들기

let [입력값, 입력값변경] = useState('')

b. onChange() 넣어주기

: 뭔가 입력이 될 때, 안의 함수가 실행됨. onInput() 과 동일함

 <input onChange={() =>{}}></input>

c. 다른 변수에 저장할 수 있게 코드 적기

: e.target -  이벤트 동작하는 곳

: e.target.value - 값을 가져오겠다 하는 문법 ( 자바스크립트 문법 ) 

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

 

- 콘솔창으로 확인해본다면,

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

 

3. 사용자가 input에 입력한 값을 입력값 state로 저장하기

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

 

 

5. 글발행 - input : 글을 state에 넣기

1. 사용자가 입력한 글 state로 저장하기

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

2. 버튼 누르면 입력한 글 state를 글제목 state에 추가하기

- 나쁜 코드

<div className="publish"> 
        <input onChange={(e) =>{ 입력값변경(e.target.value) }}/>
        <button onClick={() => {
          글제목.unshift(입력값) // 맨앞에 자료 추가 -> 하지만 state를 직접변경하는 것은 나쁜관습
          글제목변경(글제목)
        }}>저장</button>
</div>

- 좋은 코드

: 실전에는 Ajax를 이용하여 데이터를 서버에 보냄 

<div className="publish"> 
  <input onChange={(e) =>{ 입력값변경(e.target.value) }}/>
  <button onClick={() => {
      var arrayCopy = [...글제목]
      arrayCopy.unshift(입력값) // 맨앞에 자료 추가 
      글제목변경(arrayCopy)
  }}>저장</button>
</div>

 

6. 옛날에 사용했던 class React 문법

class : 변수/ 함수 보관하는 덩어리

extends : 오른쪽에 있는 것의 성질을 물려받겠다는 의미

class Profile extends React.Component : React.Component의 것을 Profile이 물려받는다는 의미

constructor : class 의 변수/초기값 저장할 때 사용함. this 를 반드시 적어줘야함 

setState : state를 변경해줌. 하지만 이것은 state를 대체해주는 것이아니라, 보여주는 것만 달라짐 

class Profile extends React.Component{
  constructor(){
    super();
    this.state = {name : 'Kim', age : 10}
  }

  
  render(){
    return(
      <div>
        <h3>프로필입니다</h3>
        <p>저는{this.state.name}</p>
        <button onClick={() =>{this.setState({name:'Park'})}}>버튼</button>
        </div>
    )
  }
}

 

---

: 코딩애플 강의를 공부하고 정리한 내용입니다.