emayom.log

🔥 Warning: Each child in a list should have a unique "key" prop. 🔥 익숙한 워닝이다 ,,,! 리액트에서 map을 사용해서 엘리먼트를 하나씩 만들어낼 때 키 값을 주지 않으면 항상 보게 되는 문구이다. 리액트에서 key는 도대체 왜 중요한 것일까? Key ( index ❌ ) 리액트에서 key는 꽤 중요한 듯 보인다. 경우에 따라 키를 줬을 때와 안 줬을 때의 리렌더링에는 큰 차이가 있다. 배열이니까 key를 편하게 index로 주면 안 되나? 어차피 자기들끼리 다르면 유니크한 것 아닌가라고 생각했다 ㅎㅎㅎ 결론은 아니다! 그렇게 사용하면 안 된다. 예를 들어 아래와 같이 카드가 다른 순서로 섞인 배열의 패가 있다고 했을 때, 이것을 1초마다 카드를 섞듯..

이전 포스팅에서 함수 선언식과 표현식에 대해 알아봤다! 함수 표현식을 이용해서 함수를 보다 가독성 있게 표현할 수 있었다. 하지만, 화살표 함수를 사용하면 표현식을 좀 더 간결하게 표현할 수 있다. 🤔 (그럼 선언식은 ?????) 이전 포스팅에서 알아본 함수 표현식을 다시 한번 확인해보자. 함수 선언식과 비교해보면 음 나름 가독성 있는 ? 코드처럼 보인다. //함수 선언식 //function 키워드로 단독으로 함수를 선언한 것! function sum (a, b) { return a + b; }; //함수 표현식 //변수를 함수에 할당한 것 const sum = function(a, b) { return a + b; }; 화살표 함수 ? 익명 함수 ? 화살표 함수는 ES6에 새로 추가된 유용한 기능으로 ..

자바스크립트에서는 함수를 만들 때 사용할 수 있는 여러가지 문법이 있다. 오늘은 함수 선언식과 함수 표현식의 차이점에 대해 알아보자. 🤔 함수 선언식(Function Declarations) ? 함수 선언식은 자주 보게되는 기본적인 형태를 띄고 있다. 함수 선언 또는 함수 정의는 function 키워드로 시작한다. 그 뒤로 함수의 이름을 적고, 중괄호 사이에 함수의 기능?을 적게된다. function handleIt() { console.log("I can handle it!!"); } handleIt(); 함수 표현식 (Function Expression) ? 함수를 만드는 다른 방법으로 함수 표현식이 있다. 유연한 자바스크립트의 특징을 활용한 선언 방식으로 함수 표현식은 익명 함수를 만들며, 변수에 ..

오늘은 강의를 들으면서 새롭게 알게 된 점을 작성하려고 한다! 🤔 useState()를 이용해 입력값을 업데이트하고 message로 valid 한 지 여부를 알려주는 예제를 진행했다. startsWith(0)을 phoneNumber으로 검사하려고 했는데 아래 예제를 진행하다 보니 useState()로 상태를 변경한다고 해서 즉시 업데이트가 되지 않는다는 특성을 확실히 알 수 있었다 ,,,!!!! 그렇기 때문에 0으로 시작하는지 여부와 길이를 확인하기 위해서는 event.target으로부터 받은 value를 이용하여 직접 확인해야 했다! 그리고 html 버튼에는 disabled를 줄 수 있었다 1!! disabled={true} 이면 버튼을 누를 수 없도록 만드는 속성이었다. 마지막으로 input의 val..

리액트 공부를 하다 어쩌면 당연할 수도 있지만 생각지도 못했던 엥? 싶었던 부분이 있어서 글을 남겨보려고 한다. 🤔 form 태그 중 을 사용할 때 id와 name 속성을 지정하는데 name과 id 둘 모두 element를 식별? 참조하기 위해 사용된다. 여기서 name 속성은 form이 제출될 때 서버에 폼 값을 넘겨주기 위해 사용한다. (굳이 서버로 넘기지않은 값에는 name을 생략해도 무방하다,,!) 당연히 id는 유일한 값으로 사용되어야 하기 때문에 중복이 안되고, name은 중복이 가능한 값이다. 바로 여기서 오늘 적어보려는 주제가 등장한다! (아래 코드는 리액트 공부를 하며 작성하던 코드라 조금 다르다,,,!) const root = document.getElementById("root"); ..

input 태그를 작성하고 해당 태그에 포커스를 주고싶을 때! html 태그에 autofocus를 명시하거나, 자바스크립트에서는 selector 함수를 통해 가져온 엘리먼트에 focus() 메소드를 통해 포커스를 줄 수 있다. 그렇다면 리액트는 ???? 🤔 우선 자바스크립트부터 확인해보자. 그냥주면 심심하니까 화면이 보여지고 3초 뒤부터 포커스를 줘보자. 우선 DOM 셀렉터로 input을 가져오고, setTimeout()으로 3초 뒤에 focus()를 주도록 작성할 것이다. const autoFocusInput = document.getElementById("input"); setTimeout(() => { autoFocusInput.focus(); }, 3000); 이제 리액트로 바꿔보자. 이전과 동일..

[JS] 자바스크립트 스코프 ? : 변수의 유효 범위 자바스크립트는 다른 프로그래밍 언어와는 다르게 전통적으로 함수 레벨 스코프를 지원하였고, 블록 스코프는 지원하지 않았다. ES6 이후부터 let, const가 등장하면서 블록 레벨의 스코프를 지원 emayom.tistory.com 이전에 var, let, const의 스코프에 대해 포스팅했었는데 러닝 리액트 책을 보다가 var, let비교에 항상 보이는 예제가 있어 정리해보려고 한다! var의 문제점 var로 변수를 사용할 경우 유의해야할 점이 있다. 변수의 중복 선언 허용 변수의 유효 범위(함수 레벨 스코프) 아래는 var를 사용했을 때 변수의 유효범위로 인해 예상치 못하게 작동할 수 있는 부분에 대해 잘 이해시켜주는 예제이다. for문을 반복하며 ..

리액트의 특징을 확인하면서 Virtual DOM 그러니까 VDOM의 개념을 알아봤었다! 오늘은 강의를 들으며 나왔던 코드를 통해 자바스크립트와 리액트의 리랜더링 방식의 차이에 대해 확실히 알아보자. 🤔 [React] 리액트 : #1 React ? 오늘은 리액트가 무엇이고 왜 리액트인지를 알아보는 시간을 가지려고한다. 👨🏻‍🎨 리액트 == 자바스크립트 라이브러리 React, Angular, Vue 알지 못하더라도 셋 중 하나 이상은 꼭 들어봤을 것 emayom.tistory.com 리랜더링 ? 랜더링은 사용자에게 View를 보여주는 것을 의미한다. 바닐라 자바스크립트의 경우 변경 사항이 있을 때마다 새로 그려나가며 전반적인 DOM 엘리먼트들을 다시 그려 화면에 표시해줬다. 결국 단순 랜더링 과정이 반복되는..

오늘은 강의를 들으며 공부했던 내용을 작게나마 정리하려고 한다. 만약 리액트로 아래와 같이 텅텅 빈 html 내부에 태그를 이용해 "Hello world"를 출력하고 싶다면 어떻게 할 수 있을까? 🤔 먼저 자바스크립트로 DOM을 다루며 Element를 생성할 때를 생각해보자. 우리는 아마도 아래와 같은 스크립트를 작성할 것이다. const root = document.getElementById("root"); //삽입할 h1 엘리먼트를 생성 const h1 = document.createElement("h1"); //생성된 엘리먼트에 주입될 텍스트 작성 h1.textContent = "Hello world"; //해당 엘리먼트를 자식으로 추가 root.appendChild(h1); 그렇다면 리액트는 어떻..

모두의 예상처럼 props 는 properties의 약자였고 state는 말그대로 상태이다,,,! ✳︎ 오늘은 props와 state의 차이점에 대해 알아보자! props, state ? 리액트 공식문서에 따르면 props와 state는 모두 렌더되는 결과물에 영향을 주는 정보를 담고 있는 자바스크립트의 객체(objects)라고 설명한다. props(short for “properties”) and state are both plain JavaScript objects. While both hold information that influences the output of render, props와 state 모두 컴포넌트에서 다루는 데이터이고, 비슷한 역할을 해서 무엇이 다른 건가 궁금했는데 둘은 작동..