Coding Appl , React 강좌 내용 정리.5 - Component 기초, 사용하기

Component 기초

html을 줄여서 쓸 수 있는 방법? Component 문법

소스 관리가 쉬워진다.

페이지 구분은 라우터(?)를 써야 하는데, 그건 나중에...

 

css 체크

.modal {
  padding: 20px;
  margin-top: 20px;
  background: #eee;
}

function App() {
  let [글제목, 글제목변경] = useState(['남자코트 추천', '강남 우동맛집', '파이썬독학']);
  let [좋아요, 좋아요변경] = useState(0);
  let posts = '강남 고기 맛집';

  return (
    <div className="App">
      <div className="black-nav">
        <div>개발 blog</div>
      </div>
      <div className="list">
        <h3>{글제목[0]}<span onClick={ ()=> {좋아요변경(좋아요+1) } }>👍</span>{좋아요}</h3>
        <p>2월 17일 발생</p>
        <hr />
      </div>
      <div className="list">
        <h3>{글제목[1]}</h3>
        <p>2월 17일 발생</p>
        <hr />
      </div>
      <div className="list">
        <h3>{글제목[2]}</h3>
        <p>2월 17일 발생</p>
        <hr />
      </div>
      
      // 이 부분
      <div className="modal">
        <h2>제목</h2>
        <p>날짜</p>
        <p>상세내용</p>
      </div>

    </div>
  );
}
export default App;

Component

복잡한 div, html을 간편하게 줄여서 쓰는 문법?

위의 예시처럼

<div className="modal"> ~~~ </div> 의 내용을

 

Component를 만들었따면

<Modal> ~ </Modal> , <Modal />로 대체해서 사용할 수가있다.

 

Component 만드는 법

1. (function App () {... } 외부에 ) fuaction 만들고 이름 짓기
2. function내부에 원하는 내용, html을 서술하고
3. 사용을 할 때는 원하는 곳에 <함수명>~</함수명> , <함수명 />

유의사항

1. 이름은 대문자로 시작하기

2. return() 안에 있는 건 태그 하나로 묶어야 함

이렇게 하지 말라

정 <div>를 넣어야 한다면, <> </>를 사용해서 묶어라

정 쓰려면 <>, </>를 사용해서

기본 소스 (상단의 소스)의 function App 도 일종의 Component

 

어떨 때 Component로 만들어서 사용할까?

마음에 드는/ 필요하다 생각되는 부분을 잘라서 만들어도 상관은 없으나,

• 반복 출현하는 HTML 덩어리들
• 자주 변경되는 HTML UI들
• 다른 페이지 만들 때도 컴포넌트로 만든다.

단점

state 쓸 때 복잡해진다. 상위 component에서 만든 state를 쓰려면 props 문법을 사용해야 한다

 

조건식 : if 대신 삼항 연산자, jsx 안의 { } 내에서 쓰기 가능.

{
  5<3 ? <Modal /> : null
}

 

클릭하면 표시되는 Modal창 표시하기

React에선 UI를 만들 때 데이터를 이용한다. (state)

 

ex) 각 <h3>를 클릭하면 <Modal /> 등장하도록 하려면?

1. useState 선언

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

2. 이벤트 등록

<div className="list">
   <h3 onClick={ ()=> { modal변경(true) } } >{글제목[2]}</h3>
   <p>2월 17일 발생</p>
</div>

3. 조건식 추가 (Component는 이미 만들어졌다는 전제)

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

Added.

버튼을 하나 추가해서, 열고닫고 (토글) 작업하기

<button onClick={ ()=> {modal변경(!modal)} }>열고닫기</button>
      {
        modal === true
        ?<Modal></Modal>
        :null
      }