index.html

---옵션선택--- {(optionValue || []).map((options, idx) => ( {options} ))} 위와같이 selected 를 사용했을시 나타나는 경고이다. react에서는 selected 를 사용하는 대신 최상위 select 에 defaultValue 를 지정하여 그놈을 맨처음 보이게 할 수 있다. ---옵션선택--- {(optionValue || []).map((options, idx) => ( {options} ))} 요런식으로. disabled 는 선택 안되게 막아주려고 넣음 https://ko.reactjs.org/docs/forms.html

const handleCartValue = () => { {selectOption[0] ? setState(true) : setState(false)} } 이 과정에서 뜨는 문법 오류(경고) 정상 작동은하지만 짜증나게 노랗게 떠있으니 여간 거슬리는게 아니다. esLint 쓰면 자동으로 교정해주니 좋지만 이 경우의 오류는 본질적으로 뭘 고치길 원하는 것일까? 그냥 써있는 그대로다. 중첩되어있다는것이니까 풀어주면 사라진다. const handleCartValue = () => { selectOption[0] ? setState(true) : setState(false); }; 이런식이나 const handleCartValue = () => selectOption[0] ? setState(true) : set..

NPM(Node Package Manager) Node.js 에서 사용할 수 있는 모듈을 패키지화 하여 모아둔 저장소같은 개념. 개인이 자신이 만든 패키지를 공개할 수 있으며, 사용또한 쉽다. 보통 npm install -g create-react-app myreact 이런식으로 쓴다. install 대신 i 라고 써도 무방, 편한대로 쓰면 된다. 이렇게 리액트를 npm을 통해 설치하게 되면 온갖것들을 다 끌고와서 react를 설치하게 되고, 그놈들은 계속 컴퓨터에 남아있는 상태가 된다. 또한 버전의 업데이트가 이루어졌을시, 스스로 삭제후 재설치를 해주어야 하는 번거로움이 발생한다. 이때 사용할 수 있는것이 NPX(Npm Package Runner) 이놈을 이용해 create-react-app을 설치할 ..

객체나 배열을 풀어 쓸 수 있다. 배열 const arr = ["a", "b", "c", "d"]; 위 배열을 각각의 변수에 담아야 한다고 치자. 원래의 방법이라면 const arr = ["a", "b", "c", "d"]; const first = arr[0]; const second = arr[1]; const third = arr[2]; const fourth = arr[3]; console.log(first, second, third, fourth) 이렇게 써야 하지만 구조분해할당을 쓰게되면 const arr = ["a", "b", "c", "d"]; const [first, second, third, fourth] = arr console.log(first, second, third, fourt..

리액트를 사용하여 해당 돔에 직접 접근해야할때 useRef 를 사용할 수 있다. 밑은 과격한 예시이다. 기존의 200px 검은 정사각형이 버튼을 누르면 300px 빨간색 정사각형으로 바꾸는 예제이다. import React, { useRef } from "react"; //1. useRef 를 불러온다 const styled = { width: "200px", height: "200px", background: "black" }; export default function App() { const handleChange = () => { colorChange.current.style = "width:300px; height:300px; background:red;" //4. 해당 ref 이름과 curre..

초기화 1번 인풋 값 : {one}, 2번 인풋 값 : {two}, 3번 인풋 값 : {three} 위와같은경우 인풋 각각 state 를 줘서 처리할 수도 있지만 아래와 같은 방법이 더 효율적이다. 우선 위와같이 각 인풋에 name 값을 주고 고유의 이름을 붙여 준다. 그리고 const [inputs, setInputs] = useState({ one: "", two: "", three: "" }); const { one, two, three } = inputs; useState를 각 이름별로 객체로 설정한뒤, 구조분해할당으로 각 값을 꺼낸다. 이후 맨 위처럼 input 의 value에 각 state를 넣어주고 onChange 이벤트를 설정해준다. 인풋이 하나만 있을때는 event.target.value..