[💎React] 리액트에서 동적인 UI 만드는 방법

props

부모 component에서 쓰던 state를 자식에게 전송하는 방법

주의*
부모 -> 자식 컴포넌트간에만 가능
❌ 자식 -> 부모 불가능 ❌
❌ 형제끼리 컴포넌트간에도 불가능 ❌

사용법

1. 부모컴포넌트에서 <자식컴포넌트 어쩌구저쩌구={사용할 state이름}/>
2. 자식컴포넌트에서 파라미터에 props 적어주기(관습적으로 props라고 씀)
3. 자식컴포넌트에서 props 사용할 부분에 {props.어쩌구저쩌구} 쓰기
   근데, 보통 어쩌구저쩌구부분은 사용할 state이름과 동일하게 적음

근데 이거 반드시 state만 전송할 수 있는건 아니라고 한다

함수 파라미터 문법이랑 똑같이, props 하나 만들고 그 자리에 이것도 넣어보고 저것도 넣어보며 비슷한 컴포넌트 여러개 만드는 것도 가능!!?!

import {useState} from 'react'
function App(){
let [food,setFood]=useState(['우동','김밥'])
return(
<div>
<Food food={food}/>
<Food food="안녕 나는 프롭스야"/>
<Food food={food} color="orange"/>
</div>
)
}
function Food(props){
return(
<div style={{backgroundColor:props.color}}>
<h4>{props.food}</h4>
</div>
)
}

동적인 UI 만드는 법

사용자가 조작할 때 형태가 바뀌는 모달창, 탭, 서브메뉴, 툴팁, 경고문 등등의 UI들

1.html css 로 미리 디자인해둔다

2.현재 UI 상태를 state로 만들어둔다

3. state 종류에 따라서 UI가 어떻게 보일지 작성한다

연습

우동/김밥/돈까스 누르면 아래에 빨강/노랑칸에도 해당글자가 뜨게 하고 싶다.

function App(){
const [food,setFood] = useState(["우동", "김밥", "돈까스"]);
const [title, setTitle] = useState(0);
return(
<div>
 {food.map((a, i) => {
        return (
          <div>
            <h4
              onClick={() => {
                setTitle(i);
              }}
            >
              {a}
            </h4>
          </div>
        );
      })}
      <FoodModal food={food} title={title}/>
</div>
}

function FoodModal(props){
return(
<div>
<h4>{props.food[props.title]}</h4>
</div>)
}

짠 완성쓰