행복을 담는 블로그

1. CSS-in-JS : Javascript code로 CSS code를 작성하여 컴포넌트를 꾸미는 방식을 말한다. 기존에 CSS 작업을 하기 위해서는, css 파일을 따로 만들어 className을 넘겨주어 작업을 하였지만, CSS-in-JS 방식은 따로 css 파일을 만들지 않고, js 파일 안에서 css 작업까지 완성할 수 있다. 2. Styled Components : React 에서 CSS-in-JS 방식으로 컴포넌트를 꾸밀 수 있게 도와주는 패키지를 말한다. 아래 npm trends를 비교해보면 styled-component를 가장 많이 사용하는 것을 알 수 있다. 🧐 그렇다면 패키지란 무엇인가? : 리액트 자체에는 없는 기능을 사용할 수 있도록 외부로터 가져와서 사용할 수 있는 외부 라이브..

Redux 설치하기 yarn add redux yarn add react-redux 이렇게 두 개를 설치해야하는데, 둘 사이를 띄우고 설치하면 한 번에 가능하다! yarn add redux react-redux package.json에서 설치 완료 확인! Redux 파일 설명 redux : 리덕스 관련 코드를 모두 몰아넣음 config : 리덕스 설정 관련 파일 전부 configStore : 중앙 state 관리소 -> 설정 코드(.js) modules : state의 그룹! ex) Todolist. todo.js export v.s. export default export로 내보내는 경우 : { 중괄호 } 필요 export store; import { store } from "./redux/config..

1. yarn create vite (명령어 중간에 - 있으면 안 됨) *vite : 프랑스어로 빠르다 . : 현재 이 폴더에서 진행하겠다. 2. 프레임워크 정하기 : React 3. 언어 정하기 SWC : Speedy Web Compiler Rust로 짜여진 컴파일러로, 현재는 JavaScript/TypeScript 트랜스파일링을 주로 담당하고 있다. 속도와 성능 개선에 초점을 맞추고 있으며, 기존의 Babel 등의 트랜스파일러를 압도적으로 뛰어넘는 성능을 보여준다. 4. 실행하기 yarn 먼저 실행하면, 이어서, yarn dev 실행하면, 5. 파일 설명 node_modules : 사용할 라이브러리가 들어가 있는 폴더 package.json : 새로운 프로젝트 사용시, 명령어 확인 할 수 있다. de..

function App() { const testArr = ["감자", "고구마", "오이", "가지", "옥수수"]; return ( // 보다 더 깔끔한 html을 작성할 수 있다. 감자 고구마 오이 가지 옥수수 ); } 앞서 만든 코드를 살펴보면, 감자 부분이 text 만 빼고 반복하고 있는 것을 알 수 있다. 1. map() 이용하여 반복되는 컴포넌트 처리하기 이를 map()을 이용하여 보다 깔끔하게 만들 수 있다. ✅ map() 은 배열 내 원래의 데이터를 가공하여 새로운 형태의 데이터로 출력하는 방법이다. 배열의 길이가 그대로 동일하게 출력된다. testArr를 map을 이용하여 새로운 배열을 만들어 내는데, 그 배열은 {item} 이 형태로 return 된다. return ( {testArr..

다음과 같은 이미지를 만들어 보자! 1. 먼저 새로운 배열을 생성해보자. const testArr = ["감자", "고구마", "오이", "가지", "옥수수"]; 2. 구역을 만들어 각각의 이름을 넣어주자. 🚨 CSS 를 작성하기 위해서는, { } 객체 형태로 내부도 key : "value",형태로 작성해준다. return ( 감자 고구마 오이 가지 옥수수 ); 3. 아래 style이 모두 겹치기 때문에, style을 따로 변수로 지정해준다. function App() { const style = { display: "flex", padding: "100px", gap: "12px", } const style-app = { padding: "10px", border: "1px solid green", b..

📌 불변성 : 메모리에 있는 값을 변경할 수 없는 것. 1. 원시 데이터 : 불변하다. 원시 데이터 : 숫자, 문자, 불리언 등... let number = 1; let secondNumber = 1; console.log(number === secondNumber); // true : 데이터타입부터 주소값까지 모든 게 다 동일하다. 1은 하나의 고유한 주소값을 가진다. 이후 1이 선언되면서, 변수는 1이 가지고 있는 고유한 주소값을 가리키게 된다. 따라서 number와 secondNumber는 동일한 1을 바라보는 같은 주소값을 가진다. 이때 number=2로 바뀌면, number가 바라보는 주소값과 secondNumber가 바라보는 주소값을 달라진다. 즉, 1과 2는 각각의 주소값을 가지고 있으며, ..

📌 Props란? : 컴포넌트 간의 정보 교류 방법 props 란? 부모 컴포넌트가 자식 컴포넌트에 넘겨준 데이터들의 묶음!! props는 반드시 위 -> 아래 방향으로 흐른다. = [부모 컴포넌트] -> [자식 컴포넌트] 방향 props는 반드시 읽기 전용으로 취급하며, 변경하지 않는다. 1. props로 값 전달 하기 [주체 : 부모] : props로 정보를 전달한다. 📝 Props를 받는 방법 1 : 자식 컴포넌트 이름 + / 닫는 태그를 사용하여 자식 컴포넌트를 불러온다. 💡 moterName이라는 이름으로 Child 컴포넌트에 name의 값을 넘겨준다. function Mother( ) { const name = "홍부인"; return ; } 2. props로 값 전달 받기 [주체 : 자식] ..

📌 컴포넌트 개념 이해하기 : 컴포넌트를 통해 UI 재사용이 가능한 개별적인 여러 조각으로 나누고, 그 조각을 개별적으로 살펴 볼 수 있다. = 독립적이다. = 하나하나의 버튼이 전체에 영향을 미치지 않는다. 컴포넌트는 javascript 함수와 유사. input : props / output : react element 1. React 컴포넌트를 표현하는 두 가지 방법 : 클래스형 컴포넌트 거의 사용 안 함. 함수형 컴포넌트만 사용한다. 🧐 WHY? 공식 홈페이지에서 함수형 컴포넌트를 사용하기를 권장함. 훨씬 쉽고, 사용하기 편리하다. 1) 함수형 컴포넌트 : 주로 가장 많이 사용한다. // App 이 하나의 컴포넌트를 나타낸다. function App () { return hello }// input..