Ella 프론트엔드일지

이 블로그 글 특 : 아주 초보자도 이해할수있는 쉬운 예제(제가 개발한 예제)로 설명함. 특히 개념설명은 무조건 쉬운 예제로 설명해야한다는 고정관념이 있는 1인 1. props - 부모 컴포넌트가 자식 컴포넌트한테 전달하는 값 - 즉, 자식 컴포넌트가 부모 컴포넌트에 있던 state를 쓰고 싶으면 props로 전송해서 써야한다. 1-1) 예제코드로 살펴보자 - 아주 간단한 아래와 같은 코드가 있다. useState모르면 내 블로그에서 검색해보삼 - App 컴포넌트에 인삿말을 p태그 3개로 나열하고 이름을 useState 배열로 받아줬다. - 그리고 Main 컴포넌트에는 자기소개로 역시나 똗같이 p태그 3개로 나열해주었다. - 그런데 예제코드를 보면, useState의 배열에 들은 이름들이 Main 에도 ..

0. map() 요약 1) 왼쪽 array 자료만큼 내부코드 실행해줌 2) return 오른쪽에 있는걸 array로 담아줌 3) 유용한 파라미터 2개 사용가능(map 안의 요소 데이터, 인덱스) 1. HTML 요소가 반복되고 있는 계획표가 있다. //App.js /*eslint-disable*/ import {useState} from 'react' import style from './App.css' function App() { let [날짜,날짜변경] = useState(['22일','23일','24일']) let [계획,계획변경] = useState(['빨래하기','청소하기','공부하기']) return ( 11월 {날짜[0]} 일정 밥먹기 운동하기 {계획[0]} 11월 {날짜[1]} 일정 밥먹기..

0. 글을 쓰게된 이유 - useState를 이용하여 버튼을 클릭하면, 배열의 값을 변경하려고 하는데... 아무리 해도..안바껴서.. - spread 문법이 필요하다는 것을 알게됨 1. 예시 코드 - useState에 기념일들이 배열로 나열되어있고, html 태그에 각 기념일들이 데이터 바인딩 되어있다. useState에 대해서 알고싶다면 아래의 글 참고 부탁드립니다. 2022.11.21 - [프론트엔드 개발/리액트] - React 기초) state값이 자꾸 바뀔때는? useState - 9월 22일 기념일을 수정 버튼을 누르면 10월22일로 바뀌었으면 좋겠다. 어떻게 하면 좋을까?? App.js 파일 import { useState } from "react"; function App() { let [날..

0. 한줄평 - 자주 바뀔것 같은 데이터들은 state에 저장했다가 html에 {데이터바인딩} 해놓자 - 바뀌지 않는 것들은 state로 굳이 저장할 필요가 없다. - state는 상품명,글제목, 가격 이런것처럼 자주 변할 것 같은 데이터들을 저장하는게 좋다. 1. 리액트의 state란? - 컴포넌트가 가질수 있는 상태 ex) 시계라는 컴포넌트가 있다면 time 이라는 state를 가질 수 있음 2. useState - useState를 사용하기 전에 코드창 상단에 아래와 같이 import를 해야한다. import {useState} from 'react' 🔸useState란? - 우리의 컴포넌트의 상태를 간편하게 생성하고, 업데이트 시키게 해주는 도구 ex) time = 6시 (시간의 상태는 계속해서 ..

리액트 VS 자바스크립트 이벤트 처리하는 방법 비교 자바스크립트에서는 이벤트핸들러를 onclick 으로 표현 리액트에서는 onClick 으로 카멜케이스로 표시하고 있다. 또한 자바스크립트에서는 "" 안에 리액트에서는 {} 안에 함수를 넣고있다. 1) 함수를 만들어서 함수로 전달 Show name이라는 버튼을 클릭하면 ella라는 글씨가 콘솔창에 보이게 해주세요~ function Hello() { function showName() { console.log("ella"); } return ( Hello Show name ); } export default Hello; 2) 직접 이벤트리스너 안에 함수 전달 function Hello() { return ( Hello { console.log(28); }} ..

✅문제 원인 - 리액트를 설치하고 나서... HTML 태그를 집어넣으려고 하니... emmet기능 즉, 자동완성 기능이 안된다....ㅜㅜㅜㅜ 하드코딩을 무지 싫어하기 때문에 이런건 바로바로 수정해줘야한다. 아래와 같은 코딩을 일일히 자동완성도 안되는거..수작업으로 치고있던 1인 ㅠㅠㅠ ✅문제 해결 1. 비쥬얼스튜디오 코드 열어서 명령팔레트를 연다(컨트롤 + 쉬프트 + p) 2. setting.json 검색해서 사용자 설정으로 들어간다. (기본설정으로 들어가면 안됨. 읽기전용임. 무조건 사용자 설정!) 3. 아래와 같은 문구를 추가해준다 "emmet.includeLanguages": { "javascript": "javascriptreact" } 이제 emmet기능이 될것이다