React Part.1-2

Suji Park·2022년 9월 15일

React 코딩애플

코딩애플

목록 보기

6/7

동적인 UI 만드는 3Step

html css로 미리 디자인 완성
UI의 현재 상태를state로 저장
state에 따라 UI가 어떻게 보일지 작성

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

형식은 자유 모달창 표현만 가능하면 된다. (true/false, 0/1, 닫힘/열림)

state가 true면 보여주세요~
조건식을 사용 : 중괄호 안에는 if문은 사용 불가
html 중간에 조건문 쓰려면 삼항연산자를 써라 !
조건문을 중괄호 안에 쓰고 싶으면 삼항연산자 (ternary operator)사용

삼항연산자
조건식 ? 참일 때 실행할 코드 : 거짓일 때 실행할 코드

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

제목 클릭시 모달창 띄우기?
-> 클릭시 state만 조절하기

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

Q. 제목 또 누르면 모달창 사라지게?

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

리액트에서는 버튼누르면 모달창 스위치만 건드린다.
자바스크립트에서는 버튼누르면 html을 변경

MAP

반복문으로 같은 html 반복생성하는 법
Map
- 모든 array 자료에 map을 넣어줄 수 있다. 소괄호 안에들어가는 함수는 다 콜백함수이다.
1. array 자료 갯수만큼 함수안의 코드를 실행해준다.
2. 함수의 파라미터는 array 안에 있던 자료를 말한다.
3. return에 뭐 적으면 array로 담아준다.
  두번째 파라미터 i = 반복문 돌 때마다 0부터 1씩 증가하는 정수

  [1, 2, 3].map(function(a, i){
    console.log(a);
    return '1234'
  })

결과 ['1234', '1234', '1234' ]

fldorxmdptj

      {
        [1,2,3].map(function(){
          return (      
            <div className='list'>
            <h4 onClick={ ()=> {setModal(!modal)}}>{ 글제목[2] }</h4>
            <p>2월 17일 발행</p>
            </div>
          )
        })
      }

리액트는 array안에 html담아놔도 잘 보여준다.

실제블로그 글갯수만큼 html 생성해주세요~


  let [글제목, 글제목변경 ] = useState(['남자코트 추천', '강남 우동맛집', '파이썬독학']);

      {
        글제목.map(function(){
          return (      
            <div className='list'>
            <h4 onClick={ ()=> {setModal(!modal)}}>{ 글제목[2] }</h4>
            <p>2월 17일 발행</p>
            </div>
          )
        })
      }

Q. 따봉갯수 개별로 기록하기

주의 state가 array자료일 경우 복사부터 하고 수정해야한다

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

      {
        글제목.map(function(a , i){
          return (      
            <div className='list' key={i}>
            <h4 onClick={ ()=> {setModal(!modal)}}>{ a }
              <span onClick={ ()=> { 
                // state가 array자료일 경우 복사부터 하고 수정해야한다
                let copy = [...따봉]; // 각 변수를 copy에 새 배열로 복사
                copy[i] = copy[i] + 1; // 따봉이 1씩 증가
                따봉변경(copy)}} // 변경된 값을 변경함수(따봉변경)으로 출력
                > 👍 </span>
                { 따봉[i]} 
            </h4>
            <p>2월 17일 발행</p>
            </div>
          )
        })
      }

반복문으로 html 생성하면 key ={html마다 다른 숫자}를 추가해야 한다. key = {i}

Props

모든 변수는 함수 탈출불가
props를 이용해서 전송하면 자식이 부모가 가지고 있던 state사용가능하다.
부모-> 자식 state 전송하려면 props 문법 쓰면 된다.
props 전송은 부모 -> 자식만 가능 (자식에서 부모, 형제끼리는 불가능 !)

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

        modal == true ? <Modal 작명={글제목}/> : null

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


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

Q. 다양한 색의 모달창이 필요한 경우

파라미터문법은 다양한 기능을 하는 함수를 만들 때 사용한다.
props도 파라미터 문법의 일종
props로 일반 문자도 전송가능하다. => 중괄호 없이 "" 작성하면 된다.

{
        modal == true ? <Modal color = {'yellow'} 글제목={글제목}/> : null
      }
function Modal(props){
  return (
    <div className='modal' style={{backgroud : props.color}}>
      <h4>{props.글제목[0]}</h4>
    </div>
  )
}

Q. 글수정 버튼 누르면 첫 글 제목이 '여자코트 추천'으로 바뀌어야한다.


  let [글제목, 글제목변경 ] = useState(['남자코트 추천', '강남 우동맛집', '파이썬독학']);

{
          modal == true ? <Modal 글제목={글제목} 글제목변경={글제목변경}/> : null
      }

function Modal(props){
  return (
    <div className='modal'>
      <h4>{props.글제목[0]}</h4>
      <p>날짜</p>
      <p>상세내용</p>
      <button onClick={() => {
        let copy = [...props.글제목];
        copy[0] = '여자코트 추천';
        props.글제목변경(copy);
      }}>글수정</button>
    </div>
  )
}

Props2

Q. 지금 누른 글 제목이 모달창안에 뜨게 하려면?

0번 글 누르면 0번글 제목이 모달에 뜨도록
1번 글 누르면 1번글 제목이 모달에 뜨도록
2번 글 누르면 2번글 제목이 모달에 뜨도록

Hint. modal의 글제목변경은 일종의 동적인 UI같은 경우임 3step 쫓아하기

  let [title, setTitle] = useState(0);


      {
        글제목.map(function(a , i){
          return (      
            <div className='list' key={i}>
            <h4 onClick={ ()=> {setModal(!modal); setTitle(i);}}>{ a }
            </div>
          )
        })
      }

// 
function Modal(props){
  return (
    <div className='modal'>
      <h4>{ props.글제목[props.title]}</h4>
    </div>
  )
}

state를 자식에 만들면 부모-> 자식 전송할 필요 없다.
state가 Modla, App에서 필요하면, App에 만들어놔야한다.
state 만드는 곳은state 사용하는 컴포넌트들 중에 최상위 컴포넌트에 만들어야 한다.

input

글 발행 input
<input> 뭔가 입력시 코드 실행하고 싶으면 onChange/onInput 사용하면 된다.
<input onScroll={()=>{console.log(1)}}> 인풋안의 스크롤을 동작할 때마다 이벤트발생
input에 입력한 값 가져오는 법
- e 이벤트객체 파라미터: 지금 발생하는 이벤트에 관련한 여러
- e.target 이벤트 발생한 html 태그
- e.target.value: 이벤트 발생한 html 태그에 입력한 값
이벤트버블링: 클릭이벤트는 상위html로 퍼진다.
이벤트 버블링을 막고싶으면 e.stopPropagation()를 사용한다.

            <h4 onClick={ ()=> {setModal(!modal); setTitle(i);}}>{ a }
              <span onClick={ (e)=> { e.stopPropagation();

input에 입력한 값 저장하려면
state 변경함수는 늦게 처리된다.(비동기 처리)

      <input onChange={(e)=> {
        입력값변경(e.target.value);  //state 변경함수는 늦게 처리된다.(비동기 처리) 끝나기 전에 다음 줄이 먼저 처리ㅠ
        console.log(입력값); }}/>

input2

Q. 버튼 누르면 글 하나 추가되는 기능만들기
hint.

html 직접하나만들 필요없다. state 조작
array에 자료 추가하는법 구글링하기

      <button onClick={ () => {
        let copy =[...글제목];
        copy.unshift(입력값);
        글제목변경(copy);
      }}>글 추가</button>

Q. 글마다 삭제버튼 & 기능만들기: - html 직접하나만들 필요없다. state 조작

           <button onclick={(e)=> {
             let copy = [...글제목];
             copy.splice(i, 1);
             글제목변경(copy);
           }}>삭제</button>

Class Components

class문법으로도 컴포넌트 생성가능하다.
지금은 function으로 해서 몰라도 되지만, 옛날거는 calss로 되어있기 때문에... 알아놓기

class Modal2 extends React.Component{
  constructor(props){
    super(props) //props는 여기! 
    //class 컴포넌트에서 state 만들려면 obj형식
    this.state = {
      name : 'kim',
      age : 20,
    }
  }
  render(){
    return (
      //state 출력
      <div>안녕 {this.state.name}
        <button onClick={()=> {
          this.setState({age : 21})
          //class 컴포넌트에서 state 수정
          // state 변경 기존 obj와 비교해서 다른부분만 변경
        }}>버튼</button>
      </div>
    )
  }
}

Suji Park

천방지축😛 얼레벌레🙄 빙글빙글🙃 돌아가는 수지의 코드~🎵