6일차 - react create

 

 

✅ react create

function Create() {
  return <article>
    <h2>Create</h2>
    <form>
      <p><input type="text" name="title" placeholder="title"></input></p>
      <p><textarea name='body' placeholder='title'></textarea></p>
      <p><input type="submit" value="Create" ></input></p>
      # submit을 눌렀을 때 
    </form>
  </article>
}

function App() {
  // const _mode = useState('welcome');
  // const mode = _mode[0];
  // const setMode = _mode[1];
  const [mode, setMode] = useState('WELCOME');
  const [id, setId] = useState(null);

  const topics = [
    {id:1 , title:'html', body:'html is ....'},
    {id:2 , title:'css', body:'css is ....'},
    {id:3 , title:'javascript', body:'javascript is ....'},

  ]
  let content = null;
  if(mode === 'WELCOME'){
    content = <Article title="Welcome" body="hello, WEB"></Article>
  } else if(mode === 'READ'){
    let title,body = null;
    for ( let i = 0; i < topics.length; i++ ) {
      if(topics[i].id === id){
        title = topics[i].title;
        body = topics[i].body;
      }
    }
    content = <Article title={title} body={body}></Article>
  } else if(mode === 'CREATE'){
    content = <Create onCreate={(title, boby)=>{
    }}></Create>
 
  }
  return (
    <div>
      <Header title="WEB" onChangeMode={()=>{
        setMode = ('WELCOME');
              }}></Header>
      <Nav topics={topics} onChangeMode={(_id)=>{
        setMode('READ');
        setId(_id);
      }}></Nav>
      {content}
      <a href='/CREATE' onClick={(event)=> {
        event.preventDefault(); 
        # a태그의 기본적인 동작을 하지 못하도록 하는 것 / 클릭했을 때 url이 바뀌지 않도록 한다. 
        setMode('CREATE');
      }}>create</a>
    </div>
  );
}

export default App;

create 역시 article의 ui가 변경되는 것이기 때문에 mode 중에 하나가 된다. mode 안에 <Create /> 컴포넌트를 넣고 그 안에 <article></article> 넣어주기

 

Create는 컴포넌트를 이용하는 이용자가 생성 버튼을 눌렀을 때 후속 작업을 할 수 있는 인터페이스를 작업하는 것onCreate prop에 함수를 전달하면 사용자가 create버튼을 눌렀을 때 이 함수가 실행되는 것

 

💡데이터 형태에 따라 다르게 사용하는 useState

const [value, setValue] = useState(primtive);

-> string, number, boolean : 원시데이터형식 

이러한 데이터로 상태를 만든다면 우리가 하던 방식으로 하면 됨 

 

그러나 

const [value, setValue] = useState(object);

우리가 상태로 만들려는 객체가 범 객체라면 처리 방법이 달라져야 한다. 

-> objcet, array : 범객체 

 

newValue = {...value} : 데이터를 복제하는 것  (배열이라면 newValue = [...value])

그리고 newValue값을 변경하기 

* 오리지널 값을 변경하는 것이 아니라 복제본을 바꾸는 것 

setValue(newValue) -> 이때 비로소 컴포넌트가 다시 실행된다.

 

 

✅ react Create컴포넌트에 props 값 전달하기

function Create(props) {
  return <article>
    <h2>Create</h2>
    <form onSubmit={(event)=>{
        event.preventDefault();
        const title = event.target.title.value;
        // event.target은 event가 발생한 태그를 가르킨다. -> form 태그 
        // submit을 눌렀을 때 발생하는 이벤트는 form태그에서 발생한 것이기 때문이다. 
        const body = event.target.body.value;
        // 그렇게 가져온 title과 body의 value값을 사용자에게 공급하면 된다. 

        //  사용자는 어떻게 create컴포넌트로 부터 sumbit 정보를 공급받을까?? -> onCreate
        props.onCreate(title, body);
    }}>
      <p><input type="text" name="title" placeholder="title"></input></p>
      <p><textarea name='body' placeholder='title'></textarea></p>
      <p><input type="submit" value="Create" ></input></p>
    </form>
  </article>
}

function App() {
  // const _mode = useState('welcome');
  // const mode = _mode[0];
  // const setMode = _mode[1];
  const [mode, setMode] = useState('WELCOME');
  const [id, setId] = useState(null);
  const [nextId, setNextId] = useState(4);
  const [topics, setTopics] = useState( [
    {id:1 , title:'html', body:'html is ....'},
    {id:2 , title:'css', body:'css is ....'},
    {id:3 , title:'javascript', body:'javascript is ....'},

  ]);
  let content = null;
  if(mode === 'WELCOME'){
    content = <Article title="Welcome" body="hello, WEB"></Article>
  } else if(mode === 'READ'){
    let title,body = null;
    for ( let i = 0; i < topics.length; i++ ) {
      if(topics[i].id === id){
        title = topics[i].title;
        body = topics[i].body;
      }
    }
    content = <Article title={title} body={body}></Article>
  } else if(mode === 'CREATE'){
    content = <Create onCreate={(_title, _body)=>{
        const newTopic = {id:nextId , title:_title, body:_body}
        // topics.push(newTopic); -> x 
        // 결과는 state를 읽을 때 생긴다. 
        const newTopics = [...topics]
        newTopics.push(newTopic);
        setTopics(newTopics);
        setMode('READ');
        setId(nextId);
        setNextId(nextId+1);
    }}></Create>
  }
  return (
    <div>
      <Header title="WEB" onChangeMode={()=>{
        setMode = ('WELCOME');
              }}></Header>
      <Nav topics={topics} onChangeMode={(_id)=>{
        setMode('READ');
        setId(_id);
      }}></Nav>
      {content}
      <a href='/CREATE' onClick={(event)=> {
        event.preventDefault();
        // reload를 방지하지 않으면 다시 원래 welcomepage가 뜸 !!
        setMode('CREATE');
        
      }}>create</a>
    </div>
  );
}

export default App;

 

const [value, setValue] = useState([1]); -> 배열로 만들어진 상태

value.push(2); -> 오리지널 데이터를 바꾼 것 

setValue(value); -> 오리지널 데이터를 입력해준 것 

 

react는 setValue를 호출했을 때 오리지널 데이터와 setValue데이터가 같은 데이터인지를 확인하고 같은 데이터라면 굳이 컴포넌트를 다시 렌더링 하지 않는다. 그래서 같은 데이터이기 때문에 렌더링이 안된다.

 

const [value, setValue] = useState([1]); 

newValue = [...value]; -> 오리지널 데이터 복제 

newValue.push(2);  -> 복제한 데이터 변경

setValue(newValue); -> 변경한 데이터를 set 한다.

 

const [value, setValue] = useState(1);

setValue(2) -> 여기 있는 값은 새로운 값이기 때문에 오리지널 데이터가 1이고 새로운 데이터가 2이기 때문에 컴포넌트를 다시 렌더링한다. 

 

 

💡새로 알게 된 사실

• Article 태그 안에 form ui가 안뜸 article 로 바꿨더니 뜸 
• 라이브러리에서 htmltagwrap 깔고 Alt + W 누르면 태그 한꺼번에 감싸주는 기능을 얻음
• create가 생성되는 과정 App <a>create</a> -> 이안에 setMode("CREATE") 그다음 mode === "create" 안에 content = <Create/> 컴포넌트 넣어주고 create컴포넌트 안에 ui 짜기 
• list 옆에 순서가 숫자로 왜 안나오나 했더니 단순히 <ol> 안붙혀서 그랬었던 것,,, 이렇게 단순한 것을 이상한데서 찾고있었다...