emayom.log

벨로퍼트와 함께하는 모던 리액트를 참고하며 todo-list를 만들었다! 바닐라 자바스크립트로 로컬 스토리지에 저장한 todo-list를 제작해봤지만 리액트를 사용한 것은 처음이다! styled-components는 CSS in JS 관련 리액트 라이브러리와 dispatch 함수를 사용했는데 처음 사용해봐서 그런지 너무 신기했다ㅎㅎㅎㅎㅎ 당분간 조금 더 자세히 코드를 뜯어볼 예정이다!!!!! 3장. 멋진 투두리스트 만들기 · GitBook 3장. 멋진 투두리스트 만들기 이번 장에서는 리액트를 사용하여 멋진 투두리스트 (미리보기) 를 만들어보겠습니다. 이번 투두 리스트 앱을 만드는 과정에서, 우리가 지금까지 배운 다양한 개념 react.vlpt.us ⚠️ 아래 내용은 모두 개인적인 참고 / 기록을 위한 용..

리액트 v16.8 이후에 등장한 Hook, 지난 포스팅에서 전박적인 컴포넌트에 대해 알아보았다면 오늘은 함수형 컴포넌트와 Hook에 대해 알아보자 🤔 클래스 컴포넌트 ? 함수형 컴포넌트 ? 리액트의 컴포넌트는 ① 클래스 컴포넌트와 ② 함수형 컴포넌트 두 가지로 나눌 수 있다. 둘은 작성하는 방식도 다르지만 내부적인 기능에도 차이가 존재한다. 먼저 클래스 컴포넌트부터 알아보자. class로 정의하고 React.Component 슈퍼 클래스를 extends하게 된다. 중요한 것은 *** render() 통해 JSX를 리턴하게 되는 것이다!!! //클래스 컴포넌트 class ClassComp extends React.Component { render() { return ( Class style componen..

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

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

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

리액트의 특징을 확인하면서 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 모두 컴포넌트에서 다루는 데이터이고, 비슷한 역할을 해서 무엇이 다른 건가 궁금했는데 둘은 작동..

우리는 Vue.js, React, Angular 등으로 SPA를 구현할 수 있다! 오늘은 SPA에 대해 알아보자. SPA ? SPA는 Single Page Application의 약자로 이름 그대로 '단일 페이지 응용 프로그램'으로 해석한다. 단일 페이지 응용 프로그램이란 사용자가 여러 페이지를 옮겨 다니는 것이 아니라 한 페이지 내에서 머무르고, 서버로부터 전달받은 데이터로 필요한 부분만 동적으로 업데이트해 보여주는 방식을 말한다. (☝🏻 이러한 방식이 '클라이언트 사이드 렌더링') 이러한 방식 덕분에 리액트의 특징에 대해 이야기하며 언급한 웹을 앱처럼 사용하는듯한 빠르고 부드러운 사용자 경험(UX)이 가능한 것이다. +) 만약 페이지를 이동할 때마다 서버로부터 새로운 html을 요청해 다시 DOM트리..

컴포넌트란 ? 리액트는 컴포넌트 기반의 구조이다. 리액트 공식 문서에 따르면 컴포넌트는 UI를 독립적이고 개별적으로 관리할 수 있는 재사용 가능한 조각으로 나누어 준다고 설명한다. Components let you split the UI into independent, reusable pieces, and think about each piece in isolation. 컴포넌트의 개념을 쉽게 생각한다면 웹페이지의 메뉴바, 버튼, 모달 창 같은 UI 요소들이 레고 한 블록, 부품과 같이 구조화한 것으로 간주할 수 있다. 컴포넌트 구조의 경우 유지 보수가 편리하다. 예를 들어 아래와 같은 html의 코드가 있다고 가정하자. , , 를 구성하는 많은 코드들이 내부에 존재할 텐데 더 많은 섹션을 가지게 된다면..