[React] 리액트 다시2

react 다시하기2

 

---

state -> 변수

props -> 값이 연결된다.

 

const Test = (props) => {
  console.log(props)
  return (
    <div>
      <h2>마이 👉{props.list}👈 lisk</h2>
     ✔객체 중괄호 필수! 중괄호 안 치면 그냥 텍스트로 받음✔
      <ul>
        <li>마이 네임 임네 이마 마이 네임 임네 이마</li>
        <li>마이 네임 임네 이마 마이 네임 임네 이마</li>
        <li>마이 네임 임네 이마 마이 네임 임네 이마</li>
        <li>마이 네임 임네 이마 마이 네임 임네 이마</li>
        <li>마이 네임 임네 이마 마이 네임 임네 이마</li>
      </ul>
    </div>
  )
}

<h2>마이 {props?.list} 👉 물음표도 붙이는 거 하나의 방법
{props.age}세 친구 {props.name}lisk</h2>
      <ul>

👇같음☝

const Test = (props) => {
  const { list, age, name } = props;
  return (
    <div>
      <h2>마이 {list} {age}세 친구 {name}lisk</h2>
      <ul>
        <li>마이 네임 임네 이마 마이 네임 임네 이마</li>
        <li>마이 네임 임네 이마 마이 네임 임네 이마</li>
        <li>마이 네임 임네 이마 마이 네임 임네 이마</li>
        <li>마이 네임 임네 이마 마이 네임 임네 이마</li>
        <li>마이 네임 임네 이마 마이 네임 임네 이마</li>
      </ul>
    </div>
  )
}

 

📌props의 전달은 아래쪽으로만 이뤄짐 = 단방향데이터

btn.addEventListener('click',()=>{})

====

<button onClick={ 
          () => ( 
            alert('엥?') 
          ) 
        }>click</button>

 

const Some = ({ list }) => {
    // console.log(props.name)
    return (
        <>
            {list}
        </>
    )
}
export default Some;


와 같음.

const Some = (props) => { 
    console.log(props.list) 
    return ( 
        <> 
            {props.list} 
        </> 
    ) 
} 
export default Some;

 

import Some from "./some"; 
const Test = ({ list, age, name, onClick }) => { 
    console.log(onClick) 
    return ( 
        <div> 
            <button onClick={onClick☜ props임.>🍔</button> 
            <h2>마이 {list} {age} 친구 {name}list 
                <button onClick={ 
                    () => ( 
                        alert(list) 
                    ) 
                }>click</button> 
            </h2> 
            <Some list={list} /> 
            <ul> 
                <li>마이 네임 임네 이마 마이 네임 임네 이마</li> 
                <li>마이 네임 임네 이마 마이 네임 임네 이마</li> 
                <li>마이 네임 임네 이마 마이 네임 임네 이마</li> 
                <li>마이 네임 임네 이마 마이 네임 임네 이마</li> 
                <li>마이 네임 임네 이마 마이 네임 임네 이마</li> 
            </ul> 
        </div > 
    ) 
} 
export default Test;


const Test = ({ list, age, name, onClick })
====
const Test = (props) => { 
    const { list, age, name } = props;

 

a태그의 기본적인 성질

: 어디로 가라

 <a href="#!">more</a>
=<Link to>​

 

리액트에서 쓰는 아이콘스

https://react-icons.github.io/react-icons/

👇설치할 때, 터미널에 입력

npm install react-icons

 

height:auto와 height:0사이에는 단계가 없어서 transition이 안 먹힘

 

 const [toggle(초기값), setToggle(변경할 값)] = useState(flase 초기값이 처음 가지고 있는 값);

import styles from './Topbanner.module.css'

const 이름마음대로 = { 
   fontSize: '100px', 
   color: '#f00' 
  }

<div style={이름마음대로}>style test</div> 
<div className={styles.test}>노란색</div>

 

---

#리액트에서 css 사용하는 방법

scss

styled-component

scc module

style={{ }}

객체로 선언해서 const style = { } 의 단점은 class에 on붙이지 못함  👉div class가 Topbanner_test__iBGc0이렇게 붙음