주니어 개발자가 되고 싶은 미짱

컴포넌트 import 및 export 하기 컴포넌트의 가장 큰 장점은 재사용성으로 컴포넌트를 조합해 또 다른 컴포넌트를 만들 수 있습니다. 컴포넌트를 여러 번 중첩하게 되면 다른 파일로 분리해야 하는 시점이 생깁니다. 이렇게 분리하면 나중에 파일을 찾기 더 쉽고 재사용하기 편리해집니다. 라고 문서에 나와 있다. 어떻게 분리하는가? 자바스크립트에서 모듈 하는 방법과 동일하다. 파일을 따로 관리하여 해당 컴포넌트를 export(내보내기) 하고 원하는 곳에 둘때는 import (가져오기)를 하면된다. import Header from '../header/Header' import * as S from './style' import { Outlet } from 'react-router' export defaul..

Commponent? 마크업(HTML)으로 뿌릴 수 있는 JavaScript 함수다. 라고 공식 사이트에 정의되어있다. 쉽게 말하자면, JavaScript 함수에 마크업을 작성 및 UI 관련된 코드 작성하고 그 해당 컴포넌트를 씀으로써 마크업 부분을브라우저에 그려주며 상호작용을 도와주는 역할이다. 그럼 누군간 말할 것이다. 기존 자바스크립트로도 가능하지 않은가? 기존 자바스크립트를 이용한다면 html 파일과 js 파일을 따로 관리하며 코드 짤 때 파일을 번갈아 보면서 짜야하며 DOCTYPE html> memo 메모 add function displayMemo(memo) { const ulEl = document.querySelector('ul'); const liEl = document.createEle..

Props - properties 의 줄임말로, (비구조할당)상위 컴포넌트에서 하위 컴포넌트로 값/변수를 전달하기 위해서 사용. - props 를 쓰는 것이 좋은 이유는, 하위 컴포넌트를 마치 백지수표처럼 쓸 수 있다 백지 수표처럼?? => 틀은 유지한 채로, 값만 우리가 원하는대로 바꿔서 여러 개의 변수를 사용한다. 즉, 백지 수표처럼 수표모양은 그대로인데 원하는 금액을 적어 해당 금액을 사용가능하다 State state를 설명하기 전에 import React from 'react' function First() { var test = 0; const countUp = () => { test = test+1; }; return ( {test} 카운트업! ) } export default First 이러..

React란 Meta (전 Facebook) 에서 2011년에 만든 프론트엔드 라이브러리 (프레임워크) React의 작동원리 SPA(Single Page Application) => 하나의 HTML 파일만 보여주고 내부 요소는 모두 자바 스크립트를 활용해 변경 시키는 것. 기존의 방식은 페이지가 변경될때 마다 무조건 새롭게 HTML, CSS파일을 표시해야했던 예전 방식보다 훨씬 효율적 Virtual Dom with Diff Algorithm DOM은 HTML 문서를 통해서 생성된 자바스크립트를 통해서 조작 가능한 요소들. (쉽게 말하면 크롬 개발자도구에서 보이는 그 요소들을 생각하면 된다.) React는 가상으로 HTML 요소들을 생성하고 (Virtual DOM), 현재 화면에 표시되는 HTML 요소들(..