TIL 7주 1일차

• 리액트로 모달창 만들기

[동적인 UI 만드는 step]

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

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

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

 

{중괄호} 안에는 if문 사용불가 -> html 중간에 조건문 쓰려면 삼항연산자

 

{

      modal == true ? <Modal /> : null  // null은 비어있는 html용으로 자주사용

    }

 

---

[반복문으로 같은 html 반복생성하는 법]

 

map()사용법

1. array 자료 갯수만큼 함수안의 코드 실행해줌

2. 함수의 파라미터는 array안에 있던 자료임

3. return에 뭐 적으면 array로 담아줌

 

map()으로 같은 html 반복생성하는 법

({중괄호}안에서는 for문말고 map함수 사용)

{

      title.map(function(a){

        return (

        <div className="list">

          <h4>{a}</h4>

          <p>2월 17일 발행</p>

        </div>  

        )

      })

    }

===

{

      title.map(function(a, i){  //  a=> array안에 있는 데이터,  i => 반복문 돌 때마다 0부터 1씩 증가하는 정수

        return (

        <div className="list">

          <h4>{title[i]}</h4>

          <p>2월 17일 발행</p>

        </div>  

        )

      })

    }

title.map() => title의 객체나 배열안에 있는 갯수만큼 반복

 

결론 : 비슷한 html 반복생성하려면 map()쓰면 된다.

map()함수

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

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

3. 유용한 파라미터 2개 사용가능

 

(참고) 반복문으로 html 생성하면 key={html마다 다른숫자} 추가해야함

<div className="list" key={i}>

그래야 리액트가 <div>들을 각각 구분할 수 있어서이다. 없으면 워닝띄어줌

 

---

[props(프롭스)]

모든 변수는 함수 탈출불가

 

부모 컴포넌트 -> (props) -> 자식 컴포넌트  /  이렇게 하면 자식이 부모가 가지고 있던 state 사용가능

 

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

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

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

참고) prop 전송은 부모->자식만 가능, 옆 컴포넌트끼리는 전송 불가

<Modal title={title}/>

 

---

function Modal(props) {

  return (

    <div className="modal">

      <h4>{props.title[0]}</h4>

      <p>날짜</p>

      <p>상세내용</p>

    </div>

  );

}

 

(중요) state 만드는 곳은 state 사용하는 컴포넌트들 중 최상위 컴포넌트 ( 보통 App() )

 

---

<input> 기능

 

<input>에 뭔가 입력시 코드실행하고 싶을 때 :

'이벤트핸들러' -> 매우 많음, 필요하면 검색해서 쓰기

 

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

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

 

"e" => event 객체, 지금 발생하는 이벤트에 관련한 여려 기능이 담겨있음

 

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

e.target : 이벤트 발생한 html태그

e.target.value : 이벤트 발생한 html태그에 입력한 값

 

----

클릭이벤트는 상위html로 퍼짐(이벤트버블링)

상위html로 퍼지는 이벤트버블링을 막고싶으면 e.stopPropagation()

----

<input>에 입력한 값 저장하려면 -> 보통 변수/state에 저장해둠

(state변경함수는 늦게처리됨 -> 전문용어로 비동기처리)