전체 글

화살표 함수의 장점은 함수를 정의하는 영역의 this를 그대로 전달 받을 수 있다는 것입니다. 우선 아래 3가지 형식으로 같은 값을 출력하는 식을 보겠습니다. //1. 전통적인 JS 함수 형식 const test1 = function(a,b){ return a+b; } //2. 화살표 함수 형식 const test2 = (a,b) => { return a+b; } //3. 리턴문만 작성한 경우 화살표 함수를 아래처럼 더 압축할 수 있다. const test3 = (a,b) => a+b; 이 3가지 형식은 모두 동일하게 변환되지만 1, 2 함수 형식은 서로 다른 this 값이 바인딩 될 수 있습니다. 특히 함수가 중첩되었을때는 this 로 인해 문제가발생합니다. this 기본 규칙 : 기본적으로 this는..

ES6가 생기기 전에는 변수 선언을 하기 위해 var을 주로 사용해 왔었습니다. 하지만 var은 호이스팅하기 때문에 변수가 중복 선언 되어도 에러가 발생하지 않습니다. 호이스팅이란 ? 실행 컨텍스트가 만들어진 이후에 var 키워드가 부여된 변수를 미리 생성하는 것. = 변수의 선언을 스코프 최상단으로 옮기는 행위 = JS 코드를 구문 분석 > 선언된 var 변수에 메모리 미리 할당 ( 변수를 미리 생성 ) console.log(a1); var a1 = "변수 선언 순서가 이상해도 에러가 발생하지 않는다." 호이스팅의 특징 1. 함수 단위로 호이스팅한다. - 함수 호출시 실행을 위한 컨텍스트를 만들고, 내부 코드 중 var 가 부여된 것들을 찾아 실행 컨텍스트 내부에 변수를 미리 생성한다. var로 생성된..

리액트에서 요소의 Attirbute 는 카멜 표기법을 준수해야 합니다. JSX는 자바스크립트 언어이므로 대소문자를 구별하기 때문에 케밥 표기법 대신 카멜 표기법을 이용하여 className 속성으로 클래스명을 지정하는 것입니다. React에서 작성하는 태그들은 HTML처럼 보일 뿐 사실 JSX는 자바스크립트 코드라는 점을 알아야합니다.

React를 정식으로 배우지 않아서 그런지 막히는 부분이 굉장히 많습니다..ㅠㅠ 이번엔 router 를 사용하기위해 설치했으나 import에서 제대로 되지않아 실패하였는데요, 그래서 여러가지 링크를 둘러보던 중 드디어 이유를 찾았습니다. npm i -D react-router-dom 무작정 설치하고 바로 컴포넌트를 만들어 무작정 import 해서 사용하려 했으나 실패했었는데, 이의 경우 src/index.js 에서 선언을 먼저 해주어야 정상 작동 합니다. import React from 'react'; import ReactDOM from 'react-dom/client'; import './index.css'; import App from './App'; import reportWebVitals fro..

😫 어려운 리액트. 막 때려넣으면 언젠간 깨닫는 날이 오겠지 목표 리스트와 key값, 그리고 map 함수를 이용한 반복문 사용해보기. 저는 실용성 있는 To do List를 만드는 것이 목표입니다. html로 리스트만 출력하는것은 굉장히 간단하지만, 나중에 할일을 추가, 수정, 삭제할 수 있는 기능을 만드는건 굉장히 어렵습니다. input 값을 받아 목록에 배열을 추가해야하는데, 이 때 필요한 기능이 key 입니다. 원래 저는 값을 구하기 위해 JavaScript 를 이용할 때 index 값을 사용했으나, 개발자 말로는 '성능이 저하되고 state에 영향을 줄 수 있기 때문에 리액트에서는 권장하지 않는다'고 합니다. https://robinpokorny.medium.com/index-as-a-key-is..

목표 앞서 배운 props 를 응용하여 조건문을 만들어보자. 조건문 작성하기 저는 props 값이 true 일 때 '성공' 단어를, false 일 때 '실패' 단어가 나오도록 조건을 설정해보려 합니다. //Prt2.js import React from 'react'; function Fix1 (props){ return 성공 } function Fix2 (props){ return 실패 } function Prt2 (props){ const Success = props.Success; if (Success) { return } return }; export default Prt2; Prt2.js 를 모두 작성하였습니다. 이제 Success 의 true, false 여부를 받아와야 이 함수가 완성이 됩니다..

목표 props의 개념을 정확하게 이해하고 컴포넌트에서 각각의 개체로 활용해보겠습니다. 새로운 컴포넌트 작성 새로운 컴포넌트를 작성하고, 최상위 컴포넌트 에서 props값을 전달할 예정입니다. 먼저 App.js에서 props를 받을 새로운 컴포넌트를 만들어주었습니다. //Prt1.js import React from 'react'; function Prt1 (props) { return( {props.name}, Welcome! ) } export default Prt1; ※ React는 소문자로 시작하는 컴포넌트를 DOM태그로 처리하기 때문에, 컴포넌트의 이름은 항상 대문자로 시작해야 합니다. Prt1.js 라는 파일을 만들고 return 값에 {이름}, Welcome! 이 출력되도록 설정하였습니다. ..

목표 J Query 를 이용하여 간단하게 좌우 슬라이드 만들어보겠습니다. 워낙 예전에 배웠던 거라서 기억이 나지 않아 복습 겸, 기록 겸 남깁니다. 마크업 /* part1.html */ slide1 slide2 slide3 slide4 1 2 3 저는 2개의 리스트를 만들었습니다. ul : 슬라이더 (이미지 영역) ol : 페이지네이션 (버튼 영역) 이미지 구하기 이제 실습에 재미를 더하기 위해 본인이 원하는 사진 4장을 가져오도록 합시다. CSS 그리고 가지고 온 이미지들을 slide 1, 2, 3, 4 영역에 각 자 넣어주고, css를 사용하여 보기 좋게 정리 해 줍니다. /* part1.css */ @charset 'UTF-8'; *{ margin:0; padding:0; } ol, ul, li {..