컴포넌트 만드면 좋은 점

 

어떤걸 컴포넌트로 만들면 좋은가?

 

 

어떤걸 컴포넌트로 만들면 좋은가?

1. 반복적인 html을 축약할 때

2. 큰 페이지들

3. 자주변경되는 것들

 

단점은?

state 가져다쓸 때 문제생김

 

 

 

리액트 환경에서 동적인 UI 만드는 법 (ex: 모달창 만들기)

 

 

[동적인 UI 만드는 3 step]

1. html css로 미리 디자인완성

2. UI의 현재 상태를 state로 저장

3. 조건문으로 state에 따라 UI가 어떻게 보일지 작성

 

 

 

 

map : 많은 div들을 반복문으로 줄이고 싶은 충동이 들 때

 

[1, 2, 3].map(function () {

    console.log(1);

  });

 

배열.map(콜백함수) 로 사용한다.

 

map() 함수

1. 왼쪽 array 자료만큼 내부코드 실행해준다.

2. return 오른쪽에 있는걸 array로 담아준다.

3. 파라미터 2개 사용 가능하다. (item과 index)

 

 

자식이 부모의 state 가져다쓰고 싶을 때는 props

 

부모-> 자식 state 전송하는 법

1. <자식컴포넌트 작명={state이름}

2. props 파라미터 등록 후 props.작명 사용

 

 

props를 응용한 상세페이지 만들기

state 만드는 곳은 state 사용하는 컴포넌트들 중 최상위 컴포넌트

 

 

 

<input>에 뭔가 입력시 코드실행하고 싶으면

onChange / onInput, 이벤트 핸들러는 매우 많으니 필요하면 검색해서 쓰자

 

<input>에 입력한 값 가져오는 법

onChange={ (e) => {e.target.value} } //  e.target = 이벤트 발생한 html 태그임

 

 

이벤트가 상위 html으로 퍼지는 것, (이벤트 버블링 현상, 막는법은 e.stopPropagation() )