react14 [ 리액트(React) ] Key:Value형태인 Object에 map 함수 사용하기 📍 Key:Value형태인 Object에 map 함수 사용하기 다음 과목:점수 형태인 Object에서 map 함수를 사용할 때 3가지 방법이 있다. Object.entries: array 형태로 [key, value]를 반환한다. 주의 할 점은 반환 시 객체의 순서를 보장하지 않으므로 정렬을 먼저 하고 나서 사용하는 것을 권장한다. (Object.entries(obj).sort((a, b) => b[0].localeCompare(a[0]));, 출처: MDN) Object.keys: key만 반환한다. Object.values: value만 반환한다. const subjects = { math: 90, english: 100, science: 80 }; // idx는 index 번호를 반환하고 따로 명시.. 2021. 6. 8. [ 리액트(React) ] 함수로 전달해주는 인자가 3개 이상일 때, 객체로 묶어서 전달하기 📍 함수로 전달해주는 인자가 3개 이상일 때, 객체로 묶어서 전달하기 함수로 넘겨주는 인자가 3개 이상이면, 객체 하나로 묶어 가독성이 좋아지게끔 하자. 다음 링크는 JS 클린 코드 지침서를 한국말로 번역한 깃허브링크이다. 어떻게 코드를 짜야할지 감이 오지 않는다면 다음 링크를 참고하자. Robert C. Martin's - Clean Code 한글 번역판 함수(Functions) 예를 들어, defaultScore 객체에 str, dex, int, luck의 능력치가 들어있는데 버튼을 클릭 할 때마다 능력치를 올라가게 설정하려고 한다면, 다음과 같이 작성할 수 있다. 여기서 중요한 점은 quizScore에서 인자를 하나하나 따로 떼어서 받는게 아니라 전체를 묶어서 보낸다는 점이다. 이후에 함수 안에서 .. 2021. 5. 16. [ 리액트(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. [ 리액트(React) ] 모바일화면이 벗어날 때 ⚡️ 구현 팁 웹페이지에서는 내가 설정한 화면 그대로 잘 나오는데 모바일화면에서는 화면이 깨지거나 벗어날 때 index page에서 viewport 코드가 잘 있는가? 💡 배운 점: 코드를 지울 때는 왜 지우는지 생각하자. React Hemlet을 사용하기위해 public안에있는 index.html내용을 모두 지우고 App.js에 새로 작성했지만, 결과적으로 해당 코드가 없어 모바일화면은 정상적으로 출력되지 않았다. 만약 지금의 상황과 비슷하다면 index,html페이지를 한번 살펴보자. 2021. 5. 5. 이전 1 2 3 다음
