리액트 공부2. 동적 UI (if사용), 반복문(map()사용), 입력

동적인 UI 만들기 (모달창 만들기)

저번 게시글에서 만들었던 모달창을 기능부여를 해보자 (평소엔 숨겼다가 클릭하면 보이는 방식)

 

동적인 UI만드는 step

1. HTML CSS로 미리 디자인 완성
2. UI의 형재 상태를 state로 저장
3. state에 따라 UI가 어떻게 보일지 작성 (조건문 등)

1. 은 저번 게시글에서 만들었고, 아래 코드는 2번이다.

    let [modal, setModal] = useState(false);

html 중간에 조건문을 만들때 삼항연산자를 사용해야한다.

{
     조건식 ? 참일때 실행할 코드 : 거짓일 때 실행할 코드
}

위는 삼항연산자의 사용방법이고 아래 코드처럼 사용하면 된다. html에서 아무것도 안보여주고싶을때는 null을 이용한다.

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

이제 클릭시 modal의 state를 true로 바꿔주는 코드를 추가하면 모달창이 나온다.

<h4 onClick={ () => {setModal(true)}}> {글제목[2]}</h4>

<그냥 자바스크립트였으면 버튼 누르면 모달창 html을 직접 건드림,

그러나 리액트에선 버튼 누르면 모달창 스위치(state)만 건드림>

 

만약 같은곳을 클릭해서 모달창이 닫히게 하고싶다면?

<h4 onClick={ () => {setModal(!modal)}}> {글제목[2]}</h4>

!자료 는 느낌표의 우측 자료를 반대로 바꿔준다. 즉 !modal 은 modal이 true일 땐 false로 바꿔주고 반대로 false일땐 true로 바꿔준다.

 

많은 div들을 반복문으로 줄이고 싶을 때

for 반복문은 JSX 중괄호 안에서 사용할 수 없어서 map()을 대신 사용한다.

map의 사용법을 알아보자. 아무 배열을 만들고 그 뒤에 .map(function(){})을 만드는게 만드는 방법이다.

let 어레이 = [2,3,4];
어레이.map(function(a){
  console.log(a)
});

1. array에 들어있는 갯수만큼 그 안에 있는 코드를 반복 실행시켜준다.

2. 콜백함수에 파라미터가 있으면 어레이 안에 있던 모든 자료를 하나씩 출력해준다. (2, 3, 4 가 콘솔창에 나옴)

    let array = [1,2,3];
    let newArray = array.map(function(a){
        return a * 10
    });
    console.log(newArray)

3. return 값이 있으면 변수에 담아준다. 출력하면 [10,20,30]이 출력된다

 

JSX안에서 html을 반복생성하고싶다면

{ 
        글제목.map(function(a){
          return (
          <div className="list">
            <h4>{ a }</h4>
            <p>5월 30일 발행</p>
          </div> )
        }) 
      }

혹은 아래처럼 사용할수도있다. 아래 i는 글제목의 크기만큼 0에서부터 1씩 증가한다.

{ 
        글제목.map(function(a, i){
          return (
          <div className="list">
            <h4>{ 글제목[i] }</h4>
            <p>5월 30일 발행</p>
          </div> )
        }) 
      }

참고로 map 반복문으로 반복 생성한 html안엔 key={i} 이런 속성을 추가해야한다.

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

그래야 리액트가 <div>들을 각각 구분할 수 있기 때문이다. 없다면 경고가 발생한다.

 

그다음 기존에 추가했던 따봉 방식을 반복문에 추가해보자

우선 기존 state 따봉을 3개의 배열로 바꿔주고 map 안에서 state를 복제하여 가져온다음 각각의 copy의 갯수를 +1 해주는 방식으로 만들어주면 된다.

let [따봉, 따봉변경] = useState([0,0,0])

{ 
   글제목.map(function(a, i){
      return (
        <div className="list">
          <h4>{ 글제목[i] } 
            <span onClick={()=>{ 
            	let copy = [...따봉];
                copy[i] = copy[i] + 1;
                따봉변경(copy)
            }}>👍</span> {따봉[i]} 
          </h4>
          <p>5월 30일 발행</p>
        </div> )
  }) 
}

props

만약 모달창에 글제목 state가 필요한 경우 가져와 쓸 수 없다. 다른 함수에 있는 변수를 가져올 수 없기 때문

만약 컴포넌트가 서로 부모/자식 관계인 경우에는 props를 사용하여 가능하다.

1. 자식 컴포넌트를 사용하는 곳에 가서 <자식컴포넌트 작명={state이름}/>

2. 자식컴포넌트 만드는 function으로 가서 props라는 파라미터 등록 후 props. 작명 사용

function App (){
  let [글제목, 글제목변경] = useState(['남자코트 추천', '강남 우동맛집', '파이썬독학']);
  return (
    <div>
      <Modal 글제목={글제목}></Modal>
    </div>
  )
}

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

props는 오직 부모->자식 방향으로만 가능하다. 자식->부모 방향이나 컴포넌트->컴포넌트방향으로는 불가능하다.

 

사용자가 입력한 것 다루기

 

<input> 태그에는 다양한 타입들이 있는데 필요에 따라 잘 찾아서 사용하면 된다.

<input type="text"/>
<input type="range"/>
<input type="date"/>
<input type="number"/>
<textarea></textarea>
<select></select>

만약 <input>에 뭔가 입력시 코드를 실행해주고싶다면 다음과 같이 만들어주면 된다.

<input onChange={()=>{ 실행할코드 }}/>

onChange, onInput은 유저가 인풋태그에 뭔가 입력할때마다 안에 있는 코드를 실행시켜준다.

 

input에 입력한 값을 가져오고싶다면 다음과 같이 작성해주면 된다.

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

e라는 파라미터를 추가해주고 e.target.value는 현재 입력된 값을 가져올수있다.

e.target은 현재 이벤트가 발생한 곳을 알려주고, e.preventDefault()는 이벤트 기본 동작을 막아주고

e.stopPropagation()은 이벤트 버블링을 막아준다.

 

사용자가 input에 입력한 데이터를 저장하려면  state에 저장해서 쓰는게 일반적이다.

function App (){

  let [입력값, 입력값변경] = useState('');
  return (
    <input onChange={(e)=>{ 
      입력값변경(e.target.value) 
      console.log(입력값)
    }} />
  )
}

state를 하나 만들어주고 onChange될 때 마다 state에 e.target.value를 넣으라는 코드다.

 

위 코드를 실행해보면 a를 입력하면 콘솔창에 아무것도 뜨지않는다 그 후 aa를 입력하면 a만 콘솔창에 나온다

이러한 이유는 state변경함수의 특징때문인데 state는 비동기적으로 처리되어 자바스크립트에서 늦게 처리되는 코드들을 잠깐 지나치고 다음줄을 실행시켜서 console.log(입력값)이게 먼저 실행되고 그다음 그렇게 보이는 것이지만 state의 값은 정상적으로 변경된다.