본문 바로가기
REACT

REACT: 1 생활코딩

Hyeonhui 2022. 3. 30. 00:22

 

 

 

 

설치 및 컴포넌트 수정

❗️파일을 만들때 이름에 react를 넣으면 오작동 할 수 있다.

(react-***)이런식으로 '-'를 넣으면 가능

 

 

npx create react app 설치('.'은 현재 위치를 가리킴)

npx create-react-app .

 

 

npm 명령어

 

  npm start
    개발 모드로 프로그램 실행

  npm run build
    실제 배포 모드

  npm test
    테스트 모드

  npm run eject
    내부 설정 파일을 꺼내는 역할

 

 

실제 배포 단계

 

  • 빌드
npm run build
  • 서브
npx serve -s build

 

 

 

 

컴포넌트 만들기

기본태그: 소문자

사용자 정의 태그: 대문자(함수, class)

 

사용자 정의태그=컴포넌트

 

 

 

 

props 

<img src="./cat.jpg" alt="고양이" width="100" height="100">

위와 같은 태그의 alt, src, width, height...등등 을 속성이라고 함.

이러한 속성을 react에서는 props라고 한다.

 

 

 컴포넌트의 함수에 인자를 받을 수 있는 공간을 넣어주면 <해당태그의 속성(key)
=""(value)>을 받을 수 있도록 해준다.

 

 

예시

 

만약 props를 받아서 props에 따라 보이는 내용물이 다르게 보여지고 싶다면

function App() {
    return(
    <Header title="REACT"></Header>
    );
}

//들어갈 속성값이 없다면 <Header />이렇게 넣어주는 것도 좋지만
//속성값이 들어가니 <Header></Header>로 적어주는게 좋음

title="REACT"

 

 

 

Header 컴포넌트

function Header(props) {
  return (
    <header>
      <h1>
        <a href="/">Title</a>
      </h1>
    </header>
  );
}

function에 (props)[받는 인자의 이름을 마음대로 지정 가능하나, 보통은 props사용] 자리를 마련해주면 인자를 받을 수 있음

결과 props라는 오브젝트에 title이라는 key와 "REACT"라는 값을 받게 되는 것임.

 

 

console.log(props, props.title)출력

props라는 배열과, "REACT"출력

 

props 호출방법

위 컴포넌트의 Title를 받은 props로 변경

<header> {props.title} </header>

중괄호를 써줘야함.

 

 

 

 

 

props를 받아 list반복문 작성하기

 

function App() {
  return (
    <div>
         <Nav></Nav>
    </div>
   );
  }
function Nav() {
  return (
 <nav>
  <ol>
    <li>
      <a href="/read/1">html</a>
    </li>,
    <li>
      <a href="/read/2">css</a>
    </li>,
    <li>
      <a href="/read/3">js</a>
    </li>,
   </ol>
 </nav>
  );
}

 

위 Nav가 인자를 받고 받은 내용에따라<li>출력을 할 수 있도록 하고싶음

 

 

배열단위 props

function App() {
  const topics = [
    { id: 1, title: "html", body: "html is ..." },
    { id: 2, title: "css", body: "css is ..." },
    { id: 3, title: "javascript", body: "javescript is ..." },
  ];

  return (
    <div>
      <Nav topics={topics}></Nav>
    </div>
  );
}

 

function Nav(props) {
  const lis = [];
// push할 빈 배열 준비


  for (let i = 0; i < props.topics.length; i++)
  {
    let t = props.topics[i];
    lis.push(
      <li key={t.id}>
        <a href={"/read/" + t.id}>{t.title}</a>
      </li>
    );
  }
  
  return (
    <nav>
      <ol>{lis}</ol>
    </nav>
  );

 

props로 배열값을 받아 배열 내용 list로 출력

  1. 컴포넌트에 빈배열 생성
  2. for 반복문, 배열의 length만큼반복
    -태그에 {해당 내용}을 넣어 push
  3. return [배열]

태그를 반복하여 만들어낼때는 반드시 key props넣어주기
react가 해당 태그를 분별할 Id같은게 필요한다고 한다.

 

만약 <li>내에 key={t.id}미 작성 시

애플리케이션 전체가 아니라 <li>반복문 안에서 고유

key값 react가 자동으로 이러한 태그를 생성하는 경우에
 
react가 이 태그들을 추적해야하는데 react에게 prop이라는 약속된 성능을 부여함으로써
react가 성능을 높이고 정확한 동작을 하는데 협조해주는 것임
 
 
 

 

Event

<input type="button" onClick="alert(`hi`)">
 
여기서 onClick을 event라고 함
 
 
<Header title="REACT" onChangeMode={() => {
  alert("Header");
  }}> </Header>
 
onChangeMode라는 props 만들기  근데 props 값을 함수로 받음
 
 

컴포넌트

function Header(props) {
  return (
    <header>
      <h1>
        <a
          href="/"
          onClick={(event) => {
            event.preventDefault();
            props.onChangeMode();
            // 함수 호출
          }}
        >
          {props.title}
        </a>
      </h1>
    </header>
  );
클릭하면 "Header"라는 알람창이 뜸
 
 
 
이번에는 값을 가져와서 알람창에 띄워보기
      <Nav
        topics={topics}
        onChangeMode={(id) => {
          alert(id);
        }}
      ></Nav>

id라는 인자를 받아서 id를 출력

 

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>
    );
  }

<a>에 t.id를 불러와서  (event.target.id)로 호출

근데 굳이 이렇게 할 필요 없이 그냥 

 

이렇게 불러오기가 가능하다고 함(t.id)이게 더 간단하좌나~~~

  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(t.id);
          }}
        >
          {t.title}
        </a>
      </li>
    );
  }

이렇게 하면 알아서 잘 알림창이 1 2 3 차례대로 잘뜸

 

근데 굳이 for문아니여도 map으로 작성 가능하다

 

topics.map(itme)=>{원하는 태그} 이런식으로..

 

 

 

useState

event발생시에 ui를 업데이트 하기 위해 state를 사용

const _mode = useState('WELCOME');

에러가 나오지만 해당 _mode를 콘솔창에 찍어보니

 

console.log('_mode', _mode);

_mode라는 배열이 나옴

[0] : "WELCOME"

[1] : f()

 

useState는 배열을 제공하고

그 [0]번째 데이터는 값을 읽을 수 있게 하는 데이터.(상태의 값을 읽을때 쓰는 데이터)

[1]번째 데이터는 그 상태의 값을 변경할때 쓰는 함수

 

신기하고 재밌다.

 

 

태그의 속성으로 넘기면 문자가 된다.

이렇게쓰면

<a
id={t.id}
href={"/read/" + t.id}
onClick={(event) => {
event.preventDefault();
props.onChangeMode(Number(event.target.id));
}}
>

Number로 바꿔줘야함.

 

{t.id}로 쓰면 굳이 number로 바꿔 줄 필요 없음

 

 

 

Create, Update

 

 

 

 

변경시 value 말고 newValue 변경

 

map쓰면 저렇게 안해도 되지않을까? 하는 생각이 들었다.

 

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

object, array

 

객체나 배열인 경우

 

1.바로 value를 업데이트 하는게 아니라 newValue를 새로 만들어서 복사한다

const newValue={...value}

...을 붙이면 복사가 됨

오브젝트는 {}

배열은 []

 

 

2. 복사본을 변경한다

newValue 내용 변경

 

3.setValue에 넣어주면 자동으로 react가 기존 value와 비교를 하여 업데이트 시켜 줌

setValue(newValue)

 

 

 

 

Delete

빈배열 생성후 원본과는 다른 newTopic을 생성해서 push한뒤에 원본을 아예 덮어버린다.

const newTopics = []
for(let i=0; i <topics.length; i++){
	if(topics[i].id !== id){
     newTopics.push(topics.[i]);
    }
}

티스토리툴바