React 리마인드

규갓 God Gyu·2024년 10월 31일
TIL

TIL

목록 보기
74/74

다음주 월요일날 항해 99 취업 리부트 코스를 듣기 위해 사전 평가를 통과해야만 한다...
그래서 오랜만에 리엑트를 리마인드하는 강의를 들으며 잊고 있었던 혹은 헤깔렸던 내용을 정리해보려한다

상대경로 import → 절대경로 지정하기

  1. jsconfig.json 파일을 만들어주세요(반드시 root 경로에 만드세요)

  2. 다음 내용을 작성해주세요.

{
	"compilerOptions": {
		"baseUrl": "src"
	},
	"include": ["src"]
}

이렇게 하면 만약 import '../../app.css'; 로 접근하던걸 import 'app.css';로 설정할 수 있게 된다

한번 들었던 내용인데 전혀 기억못했던 내용 꿀팁 !!

컴포넌트 및 폴더 명칭

  • 재사용성이 있는 react의 컴포넌트는 대문자가 아니면 오류가 뜬다!!
    ex) 
function App () {
}
  • 폴더는 소문자로 시작한다!!
    ex)
app << 폴더명

그리고 둘다 카멜 케이스(두 단어가 합쳐지면 두번째붙여지는 단어의 첫 시작이 대문자)를 사용

JSX(쟉스)

JavaScript를 확장한 문법
JS의 모든 기능 포함, React Element 생성하기 위한 문법
React에선 딱 하나의 HTML파일만 존재
(public 폴더 아래에 있는 index.html)

JSX는 JS+XML(=HTML)
HTML태그는 .js 파일 안에서 쓸 수 없음
ex) 

<div>~~</div>

반면
JSX는 자바스크립트 안에서 html 태그 같은 마크업을 넣어 뷰(UI) 작업 가능

const A = <div>
<h1>hi</h1>
</div>

JSX Style 직접 적용

<p style={{color : "red",}}></p>

이 처럼 직접 스타일 적용을 할 시에는 객체 형식으로 들어가고 기본적으로 {}를 사용해야하기때문에 {{}}두개로 표시가 된다 그리고 value쪽은 ""로 감싸줘야한다!!

이러한 부분도 리펙토링을 통해
JS 부분에서

const color = {color:"red",}

이런 식으로 표현하고 p태그안에

<p style={color}>

이렇게 적용해도 된다

Props

부모에서 자식으로 단방향으로 내려주는 데이터 값

import React from "react";

function Son(props) {
  return <div>나는 {props.granFaName}의 손자입니다</div>;
}

function Mother(props) {
  return <Son granFaName={props.granFaName} />;
}

function GrandFather() {
  const name = "민규";
  return <Mother granFaName={name} />;
}

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

이런식으로 객체형식으로 내려주면 그 안의 key값을 찾아서 계속 뿌려주면 GrandFather컴포넌트의 데이터를 Son컴포넌트에서 사용할 수 있다

여기서 중간에 불필요한 데이터를 전달하는게 props drilling 현상

Props Children

자식 컴포넌트로 정보 전달하는 다른 방법

// src/App.js

import React from "react";

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

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

열고 닫는 하위 컴포넌트로 데이터를 입력했어도 실제로는 아무것도 출력되지 않음

User컴포넌트에서 정보를 받지 않았기 때문
그러나 User에서 console찍어보면 children key 값에 value로 안녕하세요가 객체로 들어가 있음

import React from "react";

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

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

그래서 실제로 props.children을 찍게되면 데이터를 받아서 출력이 가능해짐

Props 추출

구조분해할당으로 props 내부값 추출하는게 훨씬 직관적

function Todo({ title, body, isDone, id }){
	return <div>{title}</div>
}

보이는 것처럼 key 값을 그대로 가지고 오면 바로 div문에 props.title이런식으로 적지 않아도 구조분해 할당을 통해 좀 더 명시적이고 직관적으로 뽑아올 수 있음

default props

// components/Child.js

import React from 'react';

function Child({ name }){
	return <div>내 이름은 {name} 입니다. </div>
}

// 이렇게 설정합니다.
Child.defaultProps={
	name: '기본 이름'
}

export default Child

이런식으로 실제 props로 name을 가져오지 못했을 시, defaultProps를 설정하면, 임시로 props의 값을 채워 넣을 수 있음, 그리고 나서 실제 부모 컴포넌트에서 해당 props가 오게되면 설정된 defaultProps는 사라지고 내려받은 props로 값이 바뀜

비슷한 예시로

Default Argument

function multiply(a, b = 1) {
  return a * b;
}

console.log(multiply(5, 2));
// Expected output: 10

console.log(multiply(5));
// Expected output: 5

매개변수 지정안되면 자동으로 지정해줄 값을 정한다는 의미라고 생각하기!!

State

const [ value, setValue ] = useState( 초기값 )

const 선언 [] 배열 안에 state이름 setState이름 그리고 인자로 원하는 초기값 세팅
여기서 초기값은 initial state

state를 변경할때는 setValue(바꾸고 싶은 값)를 사용

import React, { useState } from "react";

function App() {
  const [id, setId] = useState("");
  const [password, setPassword] = useState("");

  const idHandler = (event) => {
    const inputValue = event.target.value;
    setId(inputValue);
  };

  const passwordHandler = (event) => {
    const inputValue = event.target.value;
    setPassword(inputValue);
  };

  return (
    <>
      <div>
        아이디 : <input type="text" onChange={idHandler} value={id} />
      </div>
      <div>
        비밀번호 :{" "}
        <input type="password" onChange={passwordHandler} value={password} />
      </div>
      <button
        onClick={function () {
          alert(
            `고객님이 입력하신 아이디는 ${id}이며, 비밀번호는 ${password}입니다.`
          );
          setId("");
          setPassword("");
        }}
      >
        로그인
      </button>
    </>
  );
}

export default App;

input에선 value onChange
button에선 onClick을 잊지말기!!

불변성

메모리에 있는 값을 변경할 수 없는 것
원시 데이터에선 메모리 주소가 변경되므로 불변성이 있다(=변한다)
객체 데이터는 불변성이 없다(=변하지 않음)

리액트는 화면을 렌더링할지를 state의 변화에 따라 결정한다!
단순 변수는 무시한다!

원시데이터가 아닌 데이터들은 불변성을 지키기 위해 

import React, { useState } from "react";

function App() {
  const [dogs, setDogs] = useState(["말티즈"]);

  function onClickHandler() {
		// spread operator(전개 연산자)를 이용해서 dogs를 복사합니다. 
	  // 그리고 나서 항목을 추가합니다.
    setDogs([...dogs, "시고르자브르종"]);
  }

  console.log(dogs);
  return (
    <div>
      <button onClick={onClickHandler}>버튼</button>
    </div>
  );
}

export default App;

이런식으로 ... 스프레드 연산자를 사용해서 아예 새로운 객체 및 배열을 생성시켜서 불변성을 지킨다

Sass

CSS를 전통적인 방법보다 효율적으로 사용하기 위해 만들어진 언어
코드의 재사용성 높이고 가독성 향상시커줄 수 있는 방법

$color: $4287f5;
$borderRadius: 10rem;

div {
	background: $color;
    border-radius: $borderRadius;
}

이 밖에도 중첩되서도 사용, import해서도 사용 가능

CSS RESET

default style을 제거하는 방식
구글에 서치하면 코드 나와있음

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}
profile
규갓 God Gyu
웹 개발자 되고 시포용
이전 포스트

요즘 리엑트 + vite

0개의 댓글