본문 바로가기

Frontend/React19

[ 리액트(React) ] 객체 내의 객체(이중객체)를 구조분해할당 하기 📍 객체 내의 객체를 구조 분해 할당(Double Destructuring Assignment) 하기 만약, A학생의 성적표와 기타 점수를 갖고있는 객체(Object)가 있다고 가정해보자. 그리고 alert 함수에서 DEFAULT_SCORE를 인자로 받고, 이때 subjects의 객체만을 구조분해할당을 하고 싶다면 다음과 같이 선언할 수 있다. // @ param { Object } const DEFAULT_SCORE = { subjects : { korean : 80, math : 85, english: 80 }, etc : { attitude: 90, volunteer: 95 }, } const alert = ( DEFAULT_SCORE ) => { const { subjects: {korean, m.. 2021. 5. 29.
[ 리액트(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.

티스토리툴바