고짬기록

JSX JavaScript eXtention (JS의 확장 버전) HTML 문법을 JavaScript 코드 내부에 쓴 것 빌드 시 Babel에 의해 자바스크립트로 변환 JSX 사용 시 주의점 속성은 항상 큰따옴표로 감싼다. class의 속성명은 className으로 준다. 태그는 항상 닫혀있어야 한다. input, br을 사용할 때 HTML과 다르게 클로징 태그 사용해야 함 어떤 태그라도 Self-closing tag 가능하다. , 형제 노드를 작성할 수 없다. 반드시 div나 Fragment태그로 감싸진 형태여야 함 변수를 렌더 안에서 정의하고, 리턴에서 변수명을 중괄호로 감싼 형태로 표현 render() { const name = 'WonSang'; return ( {name} ) }

✔ 그룹을 클릭하면, 클릭된 그룹 안의의 채널들 제시 (+ 채널이 너무 많으면, 스크롤바 제공) // Contents.js onClickGroup = (e) => { // state에 선택한 그룹의 채널들 넣기 var v = e.target.innerText this.setState({ "ChkChannel": this.state.Channel[v] }) // 버튼 취소 if (document.querySelector(".group-chk")) { document.querySelector(".group-chk").classList.remove("group-chk") } // 버튼 체크 e.target.classList.add("group-chk") // 채널 nav바 보이기 document.querySe..

1. 설치하기 $ npm install react-slick --save $ npm install slick-carousel --save 2. React Slick 사용할 코드 위에 import 해주기 import React, { Component } from "react"; import Slider from "react-slick"; import 'slick-carousel/slick/slick.css'; import 'slick-carousel/slick/slick-theme.css'; - 코드 class BestMemeber extends Component { ... render() { ... const settings = { // 슬라이드 옵션들 arrows: false, // 화살표 표시 dot..

💡 생각하기 경고문구가 없는 div의 className을 login-alert라고 하고, visibility: hidden으로 숨겨놓자. 경고문구가 필요할 때, login-alert의 className을 숨겨놓지 않은 log-alert-view로 변경하여 보여주자. ✔ 여기서 display: none이 아니라 visibility: hidden을 준 이유는 경고문구가 있을 때와 없을 때 공간이 사라지는 것을 원하지 않기 때문!! (경고문구 밑에 회원가입 버튼의 위치가 변경되지 않기를 원함!) 즉, display: none은 아예 사라지게 함 눈에 보이지도 않고, 공간도 존재하지 않음 하지만 visibility: hidden은 숨겨놓은 것이므로 눈에 보이지는 않지만, 공간은 존재!! ▶ 삼항 연산식을 이용하..

- state는 object이고 component의 data를 넣을 공간이 있고 이 데이터는 변함 👉 function 말고 class를 사용하는 이유 저번 프로젝트는 대부분 function을 사용했지만, 지금 프로젝트는 거의 class를 사용하는 중 import React from "react"; class App extends React.Component { state = { // 바꿀 데이터를 state에 넣기 count: 0 }; minus = () => { this.setState(current => ({ count: current.count - 1 }) ); }; add = () => { this.setState(current => ({ count: current.count + 1 }) ); }..