Ella 프론트엔드일지

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); }} ..

느낀점 방향성 1. 리액트 수업을 듣지 않고 자바스크립트 뿌시기 - output 중심의 코딩애플 인강 듣기 효과있음 그냥 코딩애플 인강만 듣다가, 코딩애플 인강 + 블로그 자료 + 설명 안보고 혼자서 빈 vs코드창에 끝까지 다시 쳐보는거 이런 학습방식으로 this와 class를 드디어 다 뿌셨다. 1) 역시 output 중심 개념 정리가 제일 잘 머리에 남는 것 같다. 계속 자료읽고 인강 듣는 input 보다는 빈 vs code에 내가 배운내용 처음부터 끝까지 정리하는 방식이 나랑 잘맞는다. 대학생때도 백지공부법을 자주 했었는데 나는 이런 방식이 잘맞는다. 2) 자스도 제대로 못끝냈다고 생각해서 이번주는 수업을 쌩으로 안듣고 자스를 혼자 공부해서 드디어 코딩애플 자스 심화 파트까지 완강했다. 이제 이번주..

선언 할당 범위 호이스팅 생성 과정 var 재선언 O 재할당 O function 함수 내부 가능 1. 선언 및 초기화 단계 2. 할당 단계 let 재선언 X 재할당 O {} 블록(중괄호 내부) 가능 1. 선언단계 2. 초기화 단계 3. 할당 단계 const 재선언 X 재선언 X {} 블록(중괄호 내부) 가능 1. 선언 + 초기화 + 할당 1. 호이스팅 호이스팅의 사전적인 정의를 살펴보자 끌어올린다라...뭘 끌어올린다는거지??? 바로 변수나 함수의 선언이 코드 최상단으로 끌어올려지는 듯한 현상을 말한다. 지난번 https://ella951230.tistory.com/entry/자바스크립트-변수-const-let-var 자바스크립트) 변수 const, let, var 1.var , let , const 한눈..