emayom.log

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

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

지난 포스팅에서 리액트를 쓰는 이유와 특징에 대해 간략히 알아봤다. 우리는 리액트 프로젝트를 시작하기에 앞서 프로젝트를 생성하고 실행하기 위해 아래와 같이 npm의 도움을 받았다! //프로젝트 생성 명령 설치 npm install -g create-react-app //프로젝트 생성 create-react-app [react-app] //프로젝트 실행 cd [react-app] npm start 오늘은 npm에 대해 자세히 알아보자. 아래의 내용은 생활코딩 npm 수업을 토대로 정리한 내용이다. npm npm이란, Node Package Manager의 약자로 명령어를 통해서 컴퓨터를 제어하는 방식인 CLI(Command Line Interface)방식으로 동작하는 프로그램이다. npm은 앱 스토어에 비..

오늘은 리액트가 무엇이고 왜 리액트인지를 알아보는 시간을 가지려고한다. 👨🏻‍🎨 리액트 == 자바스크립트 라이브러리 React, Angular, Vue 알지 못하더라도 셋 중 하나 이상은 꼭 들어봤을 것이다. 얘네들을 자바스크립트 라이브러리 / 프레임워크라고 부르는데 자바스크립트로 쉽고 편리하게 개발할 수 있도록 도와주는 공통 목적을 가지고 있다. 라이브러리 vs 프레임 워크 여기서 라이브러리와 프레임워크의 차이점에 대해 간단히 짚고 넘어가자면 라이브러리 : 개발의 편의를 위한 도구의 모음, '공구'에 비유할 수 있고 프레임워크 : 기반 구조까지 짜여져있는 거기에 다양한 도구들이 모여있는 공장에 비유할 수 있다. 이 중 리액트는 사용자에게 선택의 여지가 주어지는 자유도가 높은 라이브러리의 성격을 띄고 있..