본문 바로가기

TIL

TIL : 리액트와 인사하기 - 2

 

https://devpost.tistory.com/98

 

TIL : 리액트와 인사하기 - 1

리액트에 대해서 무엇이라고 말하는가? 리액트 공식문서에 따르면 A JavaScript library for building user interfaces 입니다. 이말은 즉 리액트는 사용자가 보는 웹 또는 앱 화면을 구축하는데 사용되는 라

devpost.tistory.com

 


 

1. JSX

 

 

<React.Fragment> </React.Fragment> 태그 

 

JSX로 이루어진 요소가 한개이상이라면   6 , 7 번째 줄  코드를 다음과 같이  묶어야합니다. 

<Fragment>의 축약 표현입니다.  그리고 리액트는  return문안에서 반드시 하나의  최상위 태그만 존재합니다. 앞에서 말한것이  가능하게  도와주는 태그입니다.

 

 

 

 

데이터를  사용자 화면에  뿌려지게 도와주는  {} (증괄호)

 

App 컴포넌트와 return 사이에  선언된 변수를  사용자 화면에 보여지게 하려면  다음과 같이  {}(중괄호)를 이용하시죠

 

 

 

조건부 렌더링

 

중괄호에 다음과 같이 삼항 연산자를  이용해서  조건에 따라  ui가  달라지게 할수 있습니다.

 

 

컴포넌트도  가능할까요  =>  네!!!!

 

 

map  과  filter

 

배열 데이터를  사용자 화면에  뿌려주고 싶다면  => map 을 이용합시다.

 

특정 데이터만  보여주고 싶다면..... filter을  사용하세여

    예를  들어서  바둑이 포함된 데이터만  사용자 화면에 뿌려주고 싶다면

 

 

 

2. state 

 

만약에 위에서 선언한 todo 데이터가  수정 , 삭제 될수 있는 값이라면   state로  관리하자. 이와 같이  state는  값이 변경의 여지가 있는  경우 사용하면 좋습니다.

 

 

  setTodo를 이용해서  데이터 삽입해보기

import React, { useState } from 'react';
import './style.css';

export default function App() {
  // 입력받을 값
  const [content, setContent] = useState('');

  // 할일목록 데이터
  const [todo, setTodo] = useState([
    {
      id: 0,
      content: '바둑 두기',
    },
    {
      id: 1,
      content: '강 주변 산책하기',
    },
  ]);

  const onSubmitButtonClick = (event) => {
    event.preventDefault();

    const obj = {
      id: crypto.randomUUID(),
      content,
    };

    // setTodo는 이전데이터 가지고 있음
    setTodo((prev) => [...prev, obj]);

    setContent('');
  };

  return (
    <>
      <form onSubmit={onSubmitButtonClick}>
        <input
          type="text"
          value={content}
          onChange={(event) => setContent(event.target.value)}
        />
        <button type="submit">제출</button>
      </form>

      {todo.map((data) => (
        <div key={data.id}>{data.content}</div>
      ))}
    </>
  );
}

 

그런데   이  데이터가  여기 뿐만  아니라  다른 곳에서도 쓰인다면  props를  사용하세요

function  App(){
 .....
 
   // 이 데이터는  쓰이는 곳 컴포넌트에도 쓰임니다.
   App 컴포넌트 데이터 
   
   <쓰이는 곳 data ={App 컴포넌트 데이터 }  />




function 쓰이는  곳( props ){

 
   .... 
  const {data} = props;
  ....
  
  return(
     <>
       {data}
     </>
     
    )
    }

 

만약에  쓰이는 곳 컴포넌트가  저  멀리  있다면  , 위에서 아래로  내려가는  프롭스 드릴링 현상이 나옵니다. 

 

1 깊이면 괜찮은데 

 

5 ... 10 ..... 400 면  ㅠㅠㅠㅠ 입니다.

 

 왜냐하면  여기서 에러가 발생하면  디버깅을  하기가 어렵습니다.  

function  App(){
 .....
 
   // 이 데이터는  쓰이는 곳 컴포넌트에도 쓰임니다.
   App 컴포넌트 데이터 
   
   <쓰이는 곳 data ={App 컴포넌트 데이터 }  />




function 데이터 전달만 하는 컴포넌트 (props) {

 
   .... 
  const {data} = props;
  ....
  
  return(
     <>
       {data}
     </>
     
    )
    
    }
    
     데이터 전달만 하는 컴포넌트2 ....
     
     데이터 전달만 하는 컴포넌트3.....
     
      .... 
      
     데이터가 필요한 컴포넌트 (props){
     
     
       // 데이터 사용
     }

 

 

컴포넌트

 

리액트에서  컴포넌트는   무엇일까요?

 

1. 다음과 같이  Profile이라는 컴포넌트를  정의합니다.  =>   자바스크립트 함수정의와 유사합니다. 

      

2. Profile이라는  컴포넌트를  다시 사용할수 있습니다.  =>  재사용성

 

3.  Profile이라는 컴포넌트를  2번처럼  선언만 해주어도  리액트가  알아서 그려주는것을 보실수 있습니다. 

 

 따라서  컴포넌트는  리액트에서    UI, 즉 사용자 인터페이스를  이루는  재사용이 가능한  조각입니다.       

 

 

 

 

 

 

 

 

 

 

 

 

 

 

'TIL' 카테고리의 다른 글