React3 useState에서의 Array(배열) 데이터 수정·추가 방법 요구사항 초기화면은 모두 down이어야함 4개의 down 버튼 중 하나를 누르면 up으로 변함 다른 down 버튼을 누르면 해당 버튼은 up으로 변하고 나머지 버튼은 down으로 변함 1. 우선 value로 false값을 가진 배열을 useState로 선언한다. amount는 props으로 받아온 숫자형 데이터값입니다. ex) 4 const [myArray, setMyArray] = React.useState( Array(amount).fill({ value: false }), ); 2. 해당 배열을 렌더링하여, value값에 따라 down, up으로 변하는 조건문을 만들어준다. const myLi = myArray.map((data, index) => ( clicked(index)} onKeyDown=.. 2021. 4. 4. [React] 함수형 컴포넌트에서의 constructor 구현 필자는 React에서 함수형 컴포넌트만 사용한다. 다른 class나 const의 코딩 방식보다 코드가 간결하고 직관적이라 생산성이 높다고 생각하기 때문이다. 하지만, function에서 class에서의 constructor를 대체하는 기능은 따로 없다. 따라서 이를 99% 구현하는 방법을 소개하고자 한다. 우선 constructor는 다음의 목적과 방식으로 사용된다. state 초기화 해당 인스턴스에 이벤트 바인딩 해당 돔이 마운트되기 전에 실행되는 것 수명주기 동안 단 한번만 실행 즉, 다른 것들보다 먼저 실행되어야 하고 렌더링 전에 실행되어야 한다는 것 하지만 함수에서는 수명주기라는 것이 없다. 그냥 실행되는 것일뿐.. 따라서 constructor를 대체하는 기능이 없는 것은 그야말로 자연스러운 것이.. 2021. 3. 27. [React] Delete '␍' prettier/prettier 버그 해결방법 React에 eslint, prettier 적용할 때 발생하는 버그 root폴더에 .eslintrc.js 혹은 eslintrc.json 내부에 다음의 'prettier/prettier' 코드를 작성하면 해결 가능 rules: { 'prettier/prettier': [ 'error', { endOfLine: 'auto', }, ], }, 2021. 3. 27. 이전 1 다음
