놀러와요 버그의 숲

이 글은 『리액트를 다루는 기술』(개정판/ 김민준 저 / 길벗 출판사)이라는 책을 참고하여 썼습니다. 학습 범위: p158 ~p.170 6.2.1 예제를 하면서 실수를 하였다. .map()함수를 이용해서 를 반복적으로 렌더링해주는 예제였는데, 실수로 fashion을 {}로 안치니까 그냥 fashion 글자 그대로 렌더링이 되어서 당황하였다. 올바른 코드는 다음 아래와 같다. const IterationSample = () => { const data = ["스트릿", "아메카지", "캐쥬얼", "데님", "포멀"]; const dataList = data.map((fashion, index) => {fashion}); // 여기서 그냥 {}쓰지 않고, fashion 해버리면 fashion이라는 글자만 반..

이 글은 『리액트를 다루는 기술』(개정판/ 김민준 저 / 길벗 출판사)이라는 책을 참고하여 썼습니다. 학습 범위: p120 ~ p140 새로 알게된 사실 1. 이벤트: 사용자가 웹 브라우저에서 DOM 요소들과 상호 작용하는 것 2. Form 요소는 값이 바뀔 때 onchange 이벤트를 실행한다. 3. div, input,span 등의 DOM 요소에는 이벤트를 설정할 수 있지만, 우리가 직접 만든 컴포넌트에는 이벤트를 자체적으로 설정할수 없다. 4. onChange 이벤트 핸들러에서 e.target.name은 해당 인풋의 name을 가리킨다. 5. 객체 안에서 key를 []로 감싸면 그 안에 넣은 레퍼런스가 가리키는 실제값이 key값으로 사용된다. const name = ‘variantKey‘; cons..

이 글은 『리액트를 다루는 기술』(개정판/ 김민준 저 / 길벗 출판사)이라는 책을 참고하여 썼습니다. 학습 범위: p85 ~ p.117 새로 알게된 사실 1. 함수 컴포넌트가 클래스형 컴포넌트보다 선언하기가 편하고, 메모리 자원도 덜 사용한다. 2. ES6의 화살표 함수는 함수를 파라미터로 전달할 때 유용하다. 3. 일반 함수는 자신이 종속된 객체를 this로 가리키며, 화살표 함수는 자신이 종속된 인스턴스를 가리킨다. 4. props는 컴포넌트 속성을 설정할 때 사용하는 요소이다. 5. props 값을 따로 지정하지 않았을 때 기본값을 설정하는 것은 defaultProps를 통해 가능하다. 6. 컴포넌트 태그 사이의 내용을 보여주는 props는 props.children을 통해서 가능하다. import..

이 글은 『리액트를 다루는 기술』(개정판/ 김민준 저 / 길벗 출판사)이라는 책을 참고하여 썼습니다. 음 2장을 통해서 알아야하는 것은 무엇일까? 나는 어떤 대답을 할 수 있어야할까? 한마디로 2장 JSX 단원의 목표가 무엇일까? 목표: 1. WHY? => JSX를 왜 쓰고, 어떤 문제를 해결해주는지 명확하게 대답을 할 수 있어야 한다. 2. HOW? => JSX를 어떻게 쓰는지 알아야 한다. (규칙) 2.1 코드 이해하기 Create-React-App을 통해서 프로젝트를 만들고 index.js에 들어가보자. import React from 'react'; 이 코드는 리액트를 불러와서 사용할 수 있게 해 줍니다. 리액트 프로젝트를 만들 때 node_modules라는 디렉터리도 함께 생성되는데요. 프로젝트..

2022.1.18일 부터 리액트 스터디를 본격적으로 시작한다. 멋쟁이 사자처럼 1기 스터디원들과 새롭게 '리액트를 다루는 기술' 이라는 책(김민준 저- 길벗출판사) 으로 스터디를 하기로 했다. 월/화/수/목/금 매일 18시 30분에 디스코드 방에서 모이기로 했다. 각자 한 파트씩 맡아서 발표를 하는 형태로 스터디를 진행하기로 했다. 내가 이 글을 쓰는 이유는 자바스크립트 딥다이브 스터디에서 느꼈던 한계나 단점에 대해서 이번에는 보완을 하고 싶어서이다. 그리고 딱 한가지 목표만 잡아서 그것을 이 책을 통해서 이루고 싶다. 그래서 여러모로 생각을 정리하고자 블로그에 글을 작성하기로 했다. 목표를 뭘로 잡을까? 딥다이브 스터디때 아쉬웠던 점은 이론만 공부해서 뭔가 공중에 날라간 느낌도 들었다. 물론 여러 전문..