TIL 6주 3일차

JSX 문법 : html도 있고 함수도 같이 씀

html 컴포넌트와 그와 관련된 함수를 뭉쳐서 세트로 만든다 -> 이 세트를 컴포넌트라 한다 -> 리액트는 컴포넌트를 여러개를 만들어서 가져다가 쓴다 -> 코드의 재활용성을 높인다.

 

자동으로 값이 업데이트되면 UI도 업데이트 되는 게 효율적 

변수가 많으면 좋지 않음 -> 변수는 잠깐 저장해주는 값

변수 업데이트 신경X, state 바뀌면 -> UI 렌더링, state가 바뀌면 UI가 업데이트됨

{useState} : 리액트에서 제공하는 유용한 함수 중 하나 -> 리액트 훅

 

function App() {

  let count = 0

  const [count2, setCount2] = useState(0)

  const increase = () =>{

    count = count + 1

    setCount2(count2+1)

    console.log("count work?", count)

  }

  return (

    <main>

    <div>{count}</div>

    <div>state:{count2}</div>

    <button onClick={increase}>증가</button>

    </main>

  );

}

export default App;

 

useState(0) // 괄호안에 값 -> 초기값

setCount2(count2+1) => setCount2 = count2 +1 ==> X, 이렇게 표현 X

 

*state값이 업데이트가 되면 변수의 값은 다시 초기화가 됨 -> 변수는 모든 상황에서 X, 잠깐 저장해주는 값

-> state 씀

 

---

function Nav(props) {

  const lis = [

    <li><a href="/">html</a></li>,

      <li><a href="/">css</a></li>,

      <li><a href="/">javascript</a></li>

  ]

  return <nav>

    <ol>

      {lis}

    </ol>

  </nav>

}

function App() {

  const topics = [

    {id:1, title:'html', body:'html is ...'},

    {id:2, title:'css', body:'css is ...'},

    {id:3, title:'javascript', body:'javascript is ...'}

  ]

  return (

    <div>

      <Header title="WEB"></Header>

      <Nav topics={topics}/>

      <Article title="Welcome" body="Hello, WEB"/>

    </div>

  );

}

topics props를 Nav 컴포넌트에 전달할려면 

1.for 문 -> 쉬운방법

2. map 이용 -> 어려운 방법

---

function Nav(props) {

  const lis = []

  for(let i=0; i<props.topics.length; i++){

    let t = props.topics[i];

    lis.push(<li key={t.id}>

      <a id={t.id} href={'/read/'+t.id} onClick={event=>{

        event.preventDefault();

        props.onChangeMode(event.target.id);

      }}>{t.title}</a>

      </li>);

  }

  return <nav>

    <ol>

      {lis}

    </ol>

  </nav>

}

function App() {

  const topics = [

    {id:1, title:'html', body:'html is ...'},

    {id:2, title:'css', body:'css is ...'},

    {id:3, title:'javascript', body:'javascript is ...'}

  ]

  return (

    <div>

      <Header title="WEB" onChangeMode= {()=>{

        alert('Header');

      }}></Header>

      <Nav topics={topics} onChangeMode={(id)=>{

        alert(id);

      }}/>

      <Article title="Welcome" body="Hello, WEB"/>

    </div>

  );

}

props.onChangeMode(event.target.id) // 바로 위에 있는 a태그의 id값을 나타냄

 

 

 

---

Prop(입력) -> state -> return

 

prop은 컴포넌트를 사용하는 외부자를 위한 데이터

state는 컴포넌트를 만드는 내부자를 위한 데이터

 

let content = null;

  if(mode === 'WELCOME'){

    content = <Article title="Welcome" body="Hello, WEB"/>

  } else if(mode === 'READ') {

    content = <Article title="Read" body="Hello, Read"/>

  }

  return (

    <div>

      <Header title="WEB" onChangeMode= {()=>{

        setMode('WELCOME');

      }}></Header>

      <Nav topics={topics} onChangeMode={(id)=>{

        setMode('READ');

      }}/>

      {content}

    </div>

  );

 

값을 바꿀거면 set~ 로 : setMode('WELCOME')  // mode = 'WELCOME' (X)