ImFe's study

리액트에서 위 JSX가 동작하지 않는다. (움직여야 할 불릿이 드래그되지 않음) value값이 맞게 인식되어도 드래그는 되지 않는다. 해결) JSX와 html의 어트리뷰트가 달라서 작동하지 않던 것. +) 무슨 차이일까 싶어서 찾아봤더니 영문은 Controlled Component와 Uncontrolled Component이다. 제어 컴포넌트의 경우(value attribute를 사용한 input) 컴포넌트가 마운트 된 후에도 value값을 변경할 수 있고(DOM의 값이 업데이트 가능함.) 비제어 컴포넌트의 경우(defaultValue attribute를 사용한 input) 컴포트가 마운트 된 후라면 value값을 변경할 수 없다.(DOM의 값이 업데이트 되지 않음.)

리액트에서 JSX로 배열을 통해 UI를 그려준다면 요소에 key속성(prop)을 넣어주어야한다. 리액트는 key속성을 이용하여 컴포넌트와 돔 요소간의 관계를 생성하는데, 라이브러리는 이러한 관계를 통해 컴포넌트가 재렌더링되어야하는지 판단한다. 배열이 static하지 않은 이상 배열의 인덱스값을 key속성으로 지정하는것은 권장되지 않는다. 리액트가 재렌더링 할 요소를 판단함에 있어 혼란이 생길 수 있기 때문. 키는 유니크할 필요는 없다. 형제 요소들 사이에서만 유니크하면 된다. 글의 제목이 입력되어있는 title배열을 받아와 map으로 뿌려주는 목적을 가진 JSX코드이다 { // map()의 두번째 인자는 반복문이 돌 때마다 0부터 1씩 증가함 title.map(function(title, i) { ret..

보호되어 있는 글입니다.

보호되어 있는 글입니다.

보호되어 있는 글입니다.

Styled Component말고도 Sass도 한번 써봐야겠다 싶어서 npm으로 설치하였더니(로컬) 해당 오류가 발생했습니다. node-modules를 삭제하고 npm install을 해봐도 해결이 안돼서 검색을 해보니 버젼을 낮춰서 깔아야 하는 듯 합니다. 현재 node-sass의 버전은 6.0.1입니다. node의 버전은 14.16.0입니다. www.npmjs.com npm Bring the best of open source to you, your team, and your company Relied upon by more than 11 million developers worldwide, npm is committed to making JavaScript development elegant, pr..

보호되어 있는 글입니다.

보호되어 있는 글입니다.