본문 바로가기

Frontend/React18

[ 리액트(React) ] 구조분해할당(Destructuring Assignment)으로 가독성 높이기 📍 구조 분해 할당(Destructuring Assignment)으로 가독성 높이기 react의 코드를 리팩토링하던 중 handleClick 함수를 module화 시켜놓고 handleClick을 사용해야하는 각각의 page에서 다음과 같이 선언했었다. categoryHandleClick의 combat, supply의 경우에 변수가 많지 않아 그러려니 할 수 있겠지만, combatHandleClick, supplyHandleClick 같은 경우 변수가 6개나 되기 때문에 괜히 코드가 괜히 길어 보이는 듯한 느낌을 받았다. 이때 구조분해할당(Destructuring Assignment)을 사용하면 코드를 깔끔하게 줄일 수 있다. 구조분해할당이 무엇인지 잘 모르겠다면 다음 MDN문서를 확인해보자. 첫번째 코드.. 2021. 5. 25.
[ 리액트(React) ] 함수로 전달해주는 인자가 3개 이상일 때, 객체로 묶어서 전달하기 📍 함수로 전달해주는 인자가 3개 이상일 때, 객체로 묶어서 전달하기 함수로 넘겨주는 인자가 3개 이상이면, 객체 하나로 묶어 가독성이 좋아지게끔 하자. 다음 링크는 JS 클린 코드 지침서를 한국말로 번역한 깃허브링크이다. 어떻게 코드를 짜야할지 감이 오지 않는다면 다음 링크를 참고하자. Robert C. Martin's - Clean Code 한글 번역판 함수(Functions) 예를 들어, defaultScore 객체에 str, dex, int, luck의 능력치가 들어있는데 버튼을 클릭 할 때마다 능력치를 올라가게 설정하려고 한다면, 다음과 같이 작성할 수 있다. 여기서 중요한 점은 quizScore에서 인자를 하나하나 따로 떼어서 받는게 아니라 전체를 묶어서 보낸다는 점이다. 이후에 함수 안에서 .. 2021. 5. 16.
[ 리액트(React) ] props, onClick, handleClick 자세하게 이해하기 📍 props, onClick, handleClick 자세하게 이해하기 Button 컴포넌트를 모듈화(module)시킬 때 이름을 바로 정하지 말고 props를 사용하여 위에서 값을 설정해서 바꿀 수 있게 끔 설정하자. 다음은 Button 컴포넌트를 외부에서 사용할 때 props로 button의 이름을 변경하는 간단한 기능이다. // components/App.js const App = () => { return ; }; // components/Button/index.js const Button = (props) => { return {props.text}; }; Button 컴포넌트에 handleClick 기능을 달아주고 싶을 때는 마찬가지로 handleClick 컴포넌트를 props로 내려주면 된다.. 2021. 5. 15.
[ 자바스크립트(JS) ] 객체 변수에서 key를 기준으로 정렬하기 ⚡️ 구현 팁 다음 key:value형태인 unordred 객체가 있을 때 key를 기준으로 정렬하고 싶다. const unordered = {police: 0, band: 0, weapon: 3, pray: 0, affair: 0, medic: 0} const ordered = {}; Object.keys(unordered).sort().forEach(function(key) { ordered[key] = unordered[key]; }) console.log(ordered); 👉🏽 { affair: 0, band: 0, medic: 0, police: 0, pray: 0, weapon: 3 } 💡 배운 점: key를 기준으로 정렬하는 방법 2021. 5. 11.
[ 리액트(React) ] atomic - 다른 컴포넌트에서 같은 기능 꺼내 쓰기 ⚡️ 구현 팁 Atomic 구조를 구현하기 위해 Question기능은 한 폴더에 넣어두고 두 개의 서로 다른 컴포넌트에서 Question 기능을 꺼내 쓰려고 할 때, 다음과 같이 사용 할 수 있다. 컴포넌트를 이중으로 사용할 때는 `children`을 사용해서 내부 데이터까지 넘겨주는것을 잊지말자!!! // Question 기능 // src/components/Question/index.js import styled from "styled-components"; const QuestionWrapper = styled.div` width: 400px; `; const QuestionLabel = styled.h1` font-size: 18px; font-weight: bold; margin-bottom: .. 2021. 5. 10.

티스토리툴바