행복을 담는 블로그

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..

📌 State React에서 State와 Hook에 대해서 간단히 정리해보고자 한다. State는 컴포넌트 내부에서 바꿀 수 있는 값으로, UI를 바꾸기 위하여 사용한다. State를 만드는 방법은 useState() 를 사용하는데, 기본 구조식은 다음과 같다. const [value, setVaule] = useState('초기값') 1) const로 선언하고, 빈 배열 []을 생성한다. 2) 빈 배열의 첫 번째 자리에는 state의 이름, 두 번째 자리에는 set + state 이름을 넣는다. 3) useState( ) 안에는 state의 초기값을 넣어준다. ▶️ State를 변경하고 싶을 때는, setValue(바꾸고 싶은 값)를 사용한다. 📌 useState 와 onClick Event를 활용 할..

1. 초기 세팅 : 최상위 div 안에 id input, password input, 로그인 button을 만든다. import React, { useState } from "react"; function App() { }; return ( 아이디 : 비밀번호 : 로그인 ); } export default App; 2. id와 password에 각각 state를 만들어준다. const [id, setId] = useState(""); const [password, setPassword] = useState(""); ▶️ 초기값은 빈 문자열로 만들어준다. 입력을 할 것이므로. 3. input 태그 안에 value와 onChange 넣어주자. 아이디 : 비밀번호 : 🚨 비밀번호 숨기고 싶으면, type="p..

React 강의를 들으며 처음 배우는 기본 개념들에 대해 간단하게 기록해보고자 한다. 1. Component(컴포넌트 = 벽돌) : 컴포넌트를 통해 UI 재사용이 가능한 개별적인 여러 조각으로 나누고, 그 조각을 개별적으로 살펴 볼 수 있다. React 에서 말하는 component = 함수를 만드는 것. ✔️ Component는 대문자로 시작한다. ✔️ 부모 - 자식 관계가 존재한다. // 부모 -> 자식(위 -> 아래) 순으로 흐른다. import React from "react"; // 자식 컴포넌트 function Child() { return 나는 아들입니다.; } // 부모 컴포넌트 function App() { return 저는 부모입니다.; } export default App;2. JSX..