리액트 입문주차TIL(26)

이번 주 부터 리액트 입문주차가 시작되었다.

약간 설렘반 걱정 반인데 ㅠ 그래도 내가 배워야 할 주특기이니 열심히 하자 마음먹었다.

그리고 공부를 해보니까 아직까지는 쫌 재밌는거같다 쉬운부분을 해서 그런가ㅎㅎㅋㅋㅋㅋㅋ

막 터미널 켜고 설치할때도 에러뜨면 어떡하지 하면서 걱정하면서 엔터치고  아니나 다를까 역시 에러가 떴다 오히려 좋아...?...

yarn을 설치할때 npm install -g yarn 이렇게 명령어가 떴는데 알 수 없는 빨간 글자들의 에러가 막 나왔다.

역시 구글링을 해보니 npm은 node.js를 설치할때 기본적으로 깔리는 프로그램이고, 이제 yarn은 npm과 같은 역할을 하지만

좀 더 부족한 부분을 개선한 패키지라고 했다.

근데 왜 다들 하라는 명령대로 했는데 나는 오류가 떴을까하고 알아보니,

명령어 앞에 sudo라는 것을 붙여주고 깔아보라는 글을 찾았다. 의심하면서 해보니까 바로 되고 난리;;;;

그리 오래 잡고 있지않아도 될 오류라 아주 다행이였다...ㅎ🙏🏻

그리고 yarn start를 치고나서 뜨는 리액트 로고창;; 고급지게 돌고 있더라ㅎ

---

1.JSX

: 컴포넌트 안의 html구조이지만 js를 사용할 수 있도록 하는 리액트만의 구문이다.

return 안에 하나의 엘리먼트로 작성이 가능하다.

return (
   <div className="App">
	<p>안녕하세요</p>
        <input type = 'text'/>
   </div>
  //div로 묶어서 하나의 element만 반환하도록 한다.
);

그리고 자바스크립트에서 사용하는 문법들을 사용할 수 있는데 { } 안에서 사용이 가능하다.

 

2.JSX에서 CSS

<p style={{color:'orange',fontSize:'20px'}}> orange </p>

이렇게 중괄호를 두번(자바스크립문법+딕셔너리)사용하여 지정해줄 수 있다.

function App(){
  const styles={
  color:'orange',
  fontSize:'20px'
  };
 return (
 <div className="App">
  <p style ={style}>orange</p>
 </div>
 );
}

이렇게 함수안에 변수로 지정해주고 그 변수를 할당해서 css를 적용할 수 있다.

 

---

(1)Props

어떻게 컴포넌트 간의 정보를 서로 교류할 수 있는가?

function Child(props){
	console.log(props)  // 이게 바로 props다.
	return <div>연결 성공</div>
}

콘솔로 찍으면

{motherName:'홍부인'}

이렇게 나오는 것을 볼 수 있다. 그러면 객체를 부르듯이

div안에 {props.motherName}을 넣으면 홍부인이라는 네임이 나올 수 있다.

▷props란 결국 부모 컴포넌트가 자식에게 넘겨준 데이터들의 묶음

▷부모 컴포넌트로부터 자식 컴포넌트에게 데이터를 넘겨 준다. (반대로는 안된다❗️)

 

(2)Props_children

import React from "react";

function User() {
  return <div></div>;
}

function App() {
  return <User>안녕하세요</User>;
}

export default App;

 

=>이렇게 적으면 아무런 입력도 화면에 나오지 않는다 왜냐, User()에서 부모의 data를 받지 않았으므로

  prop(1)을 보면 부모의 data를 보내면 자식은 props.~을 사용하여 받았다.

  그러면 이 상황에서는 어떻게 받을 수 있을까?

 

function User(props) {
	console.log(props.children)     //{children:'안녕하세요'}
  return <div>{props.children}</div>;
}

{}안에 .children을 적어주고 data를 받을 수 있다.

---

오늘은 props를 보내고 받는 기능에 좀 중점적으로 공부를 했다.

그렇게 많지 않은 분량이었는데 하루가 다갔다....ㅎ 참말로

아 그리고 구조분해할당이란 부분이 많이 나오던데 아직 이 부분에 대해서도 겉만 슬쩍 하는 정도라 좀 더 공부를 해야할껏같다.

이번 주 리액트 입문과제로 todoList 만들기가 있던데 해내려면 언능 공부하러 가아할 꺼 같다.

오늘의 TIL끝😎