22.10.20 React 2일차

// Component

 

div들의 묶음

 

function Modal() {
  return (
    <div className="hello-modal">
      <p> 제목 </p>
      <h3> 내용 </h3>
      <p> 상세내용 </p>
    </div>

  )
}

/* 사용법 */

      <Modal></Modal>
      
/* == */

	<div className="hello-modal">
      <p> 제목 </p>
      <h3> 내용 </h3>
      <p> 상세내용 </p>
    </div>

 

/* 컴포넌트를 쓰기 좋은 상황

 

반복적인 html 코드를 축약할 때 사용

 

거대한 페이지 자체를 축약할 때 사용

 

자주 변경되는 UI들을 컴포넌트로 지정하면 성능 상 좋음

 

/* 단점

 

state 가져다 쓸때 문제가 생김 ( 다른 함수에 포함되기 때문 )

 

 

// div

 

의미없는 div 줄이기, react에서

 

<>

</>     

 

==

 

<div>

 

</div>

 

의미없이 단순히 묶기위한 div태그 사용대신에 리액트에선 <> , </> 태그도 사용할 수 있다. 

 

 

// 반복문

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

 

react는 js를 쓰는것이 아니기 때문에, if문을 바로 올릴 수 없음.

 

삼항연산자로 대체하여 사용하거나, 함수로 지정하여 사용함.

 

    <div className="main-header">
      <button onClick={modaltrue}> 글 생성 </button>
    </div>
    
    
    
    
    /* 함수 */
    
    
    
      function modaltrue() {

     return setMdal(true);

  }

react에서의 html코드 변환은,  코드 자체를 건드리는것이 아니라 선언해준 State만 건드리기 때문에

 

직접적인 값 변환이 아님.

 

js에서 쓰던 방식과 다르기 때문에 이점을 유의

 

 

// Map

 

html 축약, (== for문 대용)

 

모든 array자료형 뒤에 붙일 수 있음 콜백함수와 같이 사용

 

array 자료 갯수 만큼 함수 내의 코드를 실행해줌

 

  [1,2,3].map(function(a) {
    console.log(1)
  })

 

retrun에 자료를 적으면 array에 저장시켜줌

    {
      [1,2,3].map(function(){
        return <div> Hi </div>
      })
    }

 

   let [a,b] = useState(['남자 코트 추천','도쿄 우동 맛집','서울 라면 맛집']);
   
   {
      a.map(function(a){ // state에 저장된 데이터 배열도 사용가능
        return (    

        <div className="content-list">
          <h4>{a}</h4>
          <p>4월 06일 발행</p>
        </div>

          )
      })
    }