React 입문 2주차 - 1

하.................. 시작하기 앞서, 작성해둔 글이 다 날라갔기에 작성해둔 것 중에서 중요하다고 생각했던 부분들만 정리할 예정이다.

---

React 시작하기

리액트 파일을 만드는 방법은 간단하게 2가지가 있다. CRA와 VITE인데, 우린 여기서 VITE를 사용할 것이다.

왜냐하면 만들어지는 속도도, 용량도 VITE가 낫기 때문이다.

 

yarn create vite 파일명 --template react

cd 파일명

yarn

yarn dev (vs code 터미널에서)

 

이 순서로 명령어를 입력해주면 된다.

컴포넌트
컴포넌트를 통해 UI를 재사용이 가능한 개별적인 여러 조각으로 나누는 것이다.
개념적으로 js함수와 유사하다.

리액트에서 컴포넌트를 표현하는 방법
1. 함수형 컴포넌트
정말 쉬운 컴포넌트로, 사용을 지향하고 있음,

//props라는 입력을 받음
//화면에 어떻게 표현되는지를 기술하는 React 엘리먼츠를 반환
function welcome(props){
return <h1> hello, {props.name}</h1>;
}

//훨씬 쉬운 표현
function App (){
return <h1> hello</h1>;
}

2. 클래스형 컴포넌트

class welcome extends React.Component {
render(){
return <h1> hello, {props.name}</h1>;
}
}

결론적으로 리액트에서 말하는 컴포넌트는 함수라고 할 수 있다.

컴포넌트 영역은 총 4개로 나눌 수 있다.
1. 내가 필요한 파일을 가져오는 영역
2. 자바스크립트를 쓸 수 있는 영역
3. jsx를 쓸 수 있는 영역
4. 내가 만든 컴포넌트를 밖으로 내보내는 영역

컴포넌트를 만들 때 반드시 가장 첫 글자는 대문자로 만들어야한다.
폴더는 소문자로 시작, 파일은 대문자로, 하이픈 사용 금지

 

문제1. alert창 띄우기

import React from 'react';
function App() {
    // <---- 자바스크립트 영역 ---->
    const buttonClick = () => alert('클릭');
    

    return (
        /* <---- HTML/JSX 영역  ---->*/
        <div
            style={{
                height: '100vh',
                display: ' flex',
                flexDirection: 'column',
                justifyContent: 'center',
                alignItems: 'center',
            }}
        >
            <h1>이것은 내가 만든 App컴포넌트입니다.</h1>
            <button onClick={buttonClick}>클릭</button>
        </div>
    );
}

export default App;

html 표현식이 나오는 곳에서 js문법을 사용하고싶다면 중괄호를 사용하면 된다.
onClick={handleClick}

부모 자식 컴포넌트

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

export default App;

function Child() {
  return <div>나는 자식입니다.</div>
}

App은 부모 컴퍼넌트, Child는 자식 컴퍼넌트임을 알 수 있다.

 

부모-자식 컴퍼넌트 연결 방법

function App() {
    return (
        <div>
            <h1>부모-자식 관계 테스트</h1>
            <Grandfather />
        </div>
    );
}

export default App;

function Grandfather() {
    return (
        <div>
            <p>나는 할아버지입니다.</p>
            <Father />
        </div>
    );
}

function Father() {
    return (
        <div>
            <p>나는 아빠입니다.</p>
            <Child />
        </div>
    );
}

function Child() {
    return <div>나는 자식입니다.</div>;
}

jsx는 html을 품은 js라고 생각하면 된다.
JavaScriptXml = jsx

jsx에서 사용하는 div는 돔 요소가 아닌 리액트 요소이다. 돔 요소는 돔을 구성하는 것이먀 리액트 돔을 구성하는 건 리액트 요소.

rafce를 치면 자동으로 react컴퍼넌트가 생성된다.
만약 자동으로 나오지 않으면 react snippet을 쳐서 설치하면 된다.

태그 정리
1. <input type="taxt" /> 뒤에 반드시 닫는 태그(/>)를 사용해야한다.
2. return 이하에 반드시 하나의 태그만 있어야한다.
<> </>또는 <div></div>
3. 자바스크립트 문법을 사용하려면 반드시 중괄호를 사용해야한다. {number}
4. class를 부여하고싶다면 className="" 을 적어야한다. id는 id="" 처럼 그대로 적으면 된다.
5. 객체를 넣을 때는 <p style = {{color: "orange"}}></p>
이 방법 말고도 

const pTagStyle ={
color: "orange",
fontSize: "20px",
};

<p style={pTagStyle }></p>
이렇게 사용해도 된다.

 

props
부모에서 자식으로 데이터를 전달할 때 사용한다.
부모에서 자식으로 어떤 값을 내려주는 것
props는 반드시 위에서 아래로만 흐른다. 자식은 부모에게 어떠한 값을 줄 수도 없다.
그렇기 때문에 props는 반드시 읽기 전용으로 취급한다.

// src/App.jsx

import React from 'react';

function App() {
    return <GrandFather />;
}

function GrandFather() {
    return <Mother />;
}

function Mother() {
    const name = '홍부인';
    return <Child name={name} />;
}

function Child(props) {
    console.log(props); //{name : '홍부인'} 부모에서 자식으로 내려준 값이 키,밸류로 들어가있음  
    const nameChild = '수진';
  return <div><h1>연결 성공</h1><p>{`내 이름은 ${props.name}`}</p></div>
}

export default App;