(완료)21.10.15 리엑트 CRUD 문제집1 - 다음 화면을 보고 코드를 만드시오

2021. 10. 15. 01:10ㆍ작업/React

1번 첫번째 커밋 - 사용한 태그: header,nav,ol,article,h2 / 파일 구성

1번 첫번째 커밋 정답

더보기 
//index.js
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.querySelector('#root')
);

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();
//App.js
import logo from './logo.svg';
import './App.css';
function ArticleTag() {
  return (
    <article>
      <h2>안녕</h2>
      Hello,WEB
    </article>
  )
}
function App() {
  return (
    <div>
      <header></header>
      <nav>
        <ol>
          <li><a href="1.html">html</a></li>
          <li><a href="2.html">css</a></li>
        </ol>
      </nav>
      <ArticleTag></ArticleTag>
    </div>
  );
}

export default App;

 

2번 컴포넌트화 - 사용한 태그 article, Article, Nav, Header 내가 만든 컴포넌트는 대문자로 시작, Camel어쩌구 형태. 

2번 컴포넌트화 정답

더보기 
//App.js
import logo from './logo.svg';
import './App.css';
function Article() {
  return (
    <article>
      <h2>안녕</h2>
      Hello,WEB
    </article>
  )
}
function Nav() {
  return (
    <nav>
      <ol>
        <li><a href="1.html">html</a></li>
        <li><a href="2.html">css</a></li>
      </ol>
    </nav>
  );
}
function Header() {
  return <header><a href="index.html">WEB</a></header>;
}
function App() {
  return (
    <div>
      <Header></Header>
      <Nav></Nav>
      <Article></Article>
    </div>
  );
}

export default App;

3번 Article에 props를 적용해서 보다 쓸모있는 콤포넌트 만들기 - 내가 만든 컴포넌트에 myprops를 적용한다.

3번 Article에 props를 적용해서 보다 쓸모있는 콤포넌트 만들기 정답

더보기 
//App.js
import logo from './logo.svg';
import './App.css';
function Article(myprops) {
  return (
    //안녕 대신 원하는 title과 body를 입력받고 싶다. props사용
    <article>
      <h2>{myprops.title}</h2>
      {myprops.body}
    </article>
  )
}
function Nav() {
  return (
    <nav>
      <ol>
        <li><a href="1.html">html</a></li>
        <li><a href="2.html">css</a></li>
      </ol>
    </nav>
  );
}
function Header() {
  return <header><a href="index.html">WEB</a></header>;
}
function App() {
  return (
    //아까 Article 만들 때 props값 넣어준 거 태그에서 입력해준다.
    <div>
      <Header></Header>
      <Nav></Nav>
      <Article title="HTML" body="HTML is..."></Article>
      <Article title="CSS" body="CSS is..."></Article>
    </div>
  );
}

export default App;

잠깐, 컴포넌트 정의할 때 넣는 인자 props에 대해 궁금증이 생겨 정리를 하고 간다.

https://velog.io/@lilys2/React-PropsStateEventHook-%EC%A0%95%EB%A6%AC

 

[React] Props,State,Event,Hook 정리

211008 온라인 강의 복습 내용입니다. 리액트에서 props와 state를 적절한 event와 hook을 이용해서 다룰 수 있습니다.

velog.io

동료 분의 글을 참고하였다.

Props

  • 컴포넌트에 원하는 값을 넘겨줄 때 사용한다.
  • num,str,obj,func,array 등 자바스크립트의 요소라면 제한이 없다.
  • 컴포넌트의 재사용성을 위해 사용한다.
  • 읽기 전용이라 값 변경이 불가하다.
  • 값을 변경하고자 하면 newProps를 생성해서 사용해야 한다.

1. 기본 props를 활용한 컴포넌트 만들기

//App.js
import Info from "./Info";
import "./App.css";

function App() {
  return (
    <div className="App">
      <Info memberName="아이유" />
    </div>
  );
}

export default App;
//Info.js
import React from "react";

function Info(props) {
  const memberName = props.memberName;
  return <h1>멤버 이름은 {memberName}입니다.</h1>;
}

//위 h1태그에서 {memberName}으로 중괄호를 친 이유는 변수이기 때문이다.
//태그상에서 변수를 text로 출력할 때는 저렇게 중괄호를 쳐주는 것 같다.

export default Info;

결과> 멤버 이름은 아이유입니다.

 

2. 객체 props 받고 연산하기

object를 props로 넘겨주면 .을 통해 object의 속성에 접근하여 값을 불러올 수 있다.

props로 넣은 member 객체의 .name, .age, .role 에 접근했다.

//Member.js

import React from "react";
// 아까와 다르게 props자리에 중괄호가 들어갔다. 
// 변수나 그런 의미는 아니고 object를 넣으라는 뜻인 것 같다.
function Member({ member }) {
  let isAdult = member.age >= 20 ? "성인" : "미성년자";

  return (
    <>
      <p>
        멤버의 이름은 {member.name}이고 현재 {isAdult} 입니다.멤버의 이름은 {member.name}이고 포지션은 {member.role}이며, 현재{" "}
        {isAdult} 입니다.
      </p>
    </>
  );
}
export default Member;
//App.js
import Info from "./Info";
import "./App.css";
import Member from "./Member";

function App() {
  const member1 = {
    name: "박시은",
    age: "21",
    role: "메인 보컬",
  };
  const member2 = {
    name: "김채영",
    age: "20",
    role: "리드 보컬",
  };
  const member3 = {
    name: "장재이",
    age: "17",
    role: "서브 보컬",
  };

  return (
    <div className="App">
      <Member member={member1} />
      <Member member={member2} />
      <Member member={member3} />
    </div>
  );
}
//여기서의 중괄호는 변수(const) member1을 가지고 오라는 뜻
export default App;

결과

4번 Header를 컴포넌트화 - Header 태그에도 props를 넣자.

4번 Header를 컴포넌트화 정답

더보기 
import logo from './logo.svg';
import './App.css';
function Article(myprops) {
  return (
    //안녕 대신 원하는 title과 body를 입력받고 싶다. props사용
    <article>
      <h2>{myprops.title}</h2>
      {myprops.body}
    </article>
  )
}
function Nav() {
  return (
    <nav>
      <ol>
        <li><a href="1.html">html</a></li>
        <li><a href="2.html">css</a></li>
      </ol>
    </nav>
  );
}
function Header(myprops) {
  return <header><a href="index.html">{myprops.title}</a></header>;
}
function App() {
  return (
    //아까 Article 만들 때 props값 넣어준 거 태그에서 입력해준다.
    <div>
      <Header title='WEB'></Header>
      <Nav></Nav>
      <Article title="HTML" body="HTML is..."></Article>
      <Article title="CSS" body="CSS is..."></Article>
    </div>
  );
}

export default App;

5번 복합적인 데이터를 반복문 이용해서 복수의 태그를 생성하기

정답

더보기
먼저 App의 return 정의, 활용성 좋게 topics로 넣고 싶은 내용들을 넣을 수 있게끔 Nav 내 src속성을 정의함.

 

6번 링크화

정답

 

7번 사용자 정의 이벤트를 구현하는 방법

더보기

다만 헷갈리는 것.. 내가 만든 게 onSelect,myHandler이냐? 아니면 myHandler만이냐??
onSelect가 원래 있는 함수인지 헷갈림..

 

8번 네비게이션을 위한 select 이벤트 기능 구현

정답

더보기

 

 

 

9번 상태를 도입해서 컴포넌트를 다시 랜더링 할 수 있게 되었다! READ 모드와 WELCOME 모드 대박

정답

 

10번 네비게이션에서 선택한 글을 표시할 수 있게 되었다

정답

 

11번 CREATE UI를 출력하기 위한 이벤트 구현

WELCOME 또는 READ모드
CREATE 모드
READ 모드

정답

더보기

일단 Let's Create가 있어야 하므로 Control 태그를 만든다.

최종 return 모습 / Let's Create(Control태그)를 누르면 Create할 수 있는 화면을 보이게 한다. onChangeMode라는 prop으로 changeHandler라는 이벤트를 발생시키고 그 이벤트는 mode를 CREATE로 변경한다.
Let's Create를 onClick을 하게 되면 create.html로 페이지전환은 되지 않게 하고, onChangeMode prop을 실행시킨다. 그러면 이제 모드가 changeHandler에 의해 CREATE로 모드가 전환된다.

CREATE 모드이면 article 부분을 Create태그로 작성한다. onCreate prop으로 인한 createHandler로 인해 topics에 title과 body를 추가하고, Create모드일 때만 Create 화면이 생긴다. 그리고 일단 다시 READ모드로 전환해놓는다.

CREATE 모드

그럼 이제 Create 화면이 생겼을 것이다. Create 태그를 보자.

Create태그의 return을 보면 Create라는 제목과 title,body를 입력할 수 있는 input과 input인데 좀 크게 생긴 textarea태그, 제출부분인 input이 포함되어 있다. (참고로 여기서 form의 자식태그 중 type='submit'인 애가 제출 버튼이다.)

걔를 누르면 onSubmit prop의 이벤트로 submitHandler가 실행된다. form태그의 기본 제공되는 속성이다.

submitHandler는 Create의 onCreate prop으로 input으로 받은(ev.target.어쩌구) title과 body를 전달해준다.

그럼 이제 READ모드니까 아까로 다시 돌아와서 title에 title을 넣고 body에 body를 넣은 {articleComp}로 본문을 출력해보인다.

READ 모드

12번 DELETE를 구현

Let's Delete누르면( 아직까지는 하나밖에 못 지운다 )

정답

더보기
최종 return
Control
changeHandler

참고로 <p><input type="text" name='title' defaultValue='a' /></p> 이렇게 하면 사용자가 치기 전에 input 태그의 defaultValue 가 a로 떠있다는 말이다.

13번 Update 구현

업데이트 완료

정답

더보기
// mode 수정
// topic 수정 App() 내else if의 UPDATE 모드일 때 추가
App() 밖에 Update 태그 만들기(input란, textarea란)

리펙토링까지 완료 ( 분리하고 싶은 코드부분을 드래그하여 리팩토링 -> new file로 넣기 )

 

'작업 > React' 카테고리의 다른 글

(시험용) 21.10.16 4주차 복습 - 10.14일차  (0) 2021.10.16
(시험용) 21.10.16 4주차 복습 - 10.13일차  (0) 2021.10.16
21.10.16 useParams란?  (0) 2021.10.16
21.10.16 useEffect란?  (0) 2021.10.16
21.10.13 4주차 리엑트 - Welcome Homepage와 Login page만들기 로그인 페이지 예제  (0) 2021.10.13

관련글

댓글 0

티스토리툴바