[React] styled-component

리액트에서 스타일을 지정하는 방법1) 인라인 2) css 파일 작성 후 import 3) CSS in JS- JS로 CSS를 구현하는 것- 조건에따라 스타일 적용하거나 로직을 적용하는 것이 가능해짐- styled-component는 이를 위한 도구!  styled-component1) yarn을 이용해 styled-components 설치yarn add styled-components 2) vscode에서 확장 설치 3) 사용할 jsx 파일에서 import styledimport styled from "styled-components"; 4) 스타일된 컴포넌트 만들기const StyledBox = styled.div` width: 100px; height: 100px; border: 1px soli..

• format_list_bulleted React
• · 2024. 8. 16.
• textsms

[React] 리액트의 개념과 성능 최적화 팁

요즘IT 아티클(알아두면 유용한 '리액트' 개념과 성능 최적화 팁) 기반 정리글 입니다. 리액트의 기본 개념컴포넌트 기반 아케텍처웹 애플리케이션의 복잡한 UI를 재사용 가능한 작은 단위로 분할하는 방식각 컴포넌트는 상태와 속성을 갖고있음관심사를 분리 / UI를 계층적으로 구조화하여 가독성을 높임 / 유지보수를 용이하게 함 유의할 부분- 구성요소간 의존성을 최소화- 각 컴포넌트는 한가지 책임만 진다 (단일 책임 원칙)- 다른 개발자도 컴포넌트를 이해하고 사용하기 쉽도록 속성과 반환값을 일관되게 작성해야 함 JSX 문법HTML과 유사한, 자바스크립트를 확장한 문법컴포넌트 렌더링 로직과 마크업을 한 곳에서 관리할 수 있음 유의할 점- 모든 태그는 반드시 닫혀 있어야 함- 최상위 요소는 하나여야 함- 카멜케이스..

• format_list_bulleted React
• · 2024. 8. 14.
• textsms

[React] 리액트 훅, 리액트를 함수로 분석하기

State Hook: 사용자 입력과 같은 변하는 정보를 기억할 수 있는 훅useState직접 업데이트 할 수 있는 state 변수를 선언 useReducerreducer 함수 내부의 업데이트 로직을 사용해 state 변수를 선언  Effect Hook: 컴포넌트를 외부 시스템에 연결하고 동기화할 수 있게 함데이터 흐름을 조정하기 위해 사용하지 않아야 함! (이런 경우는 state hook 사용) main.jsx -> 컴포넌트를 실행하는 엔트리포인트 (비트가 가장 먼저 실행하는 함수)  리액트 함수로 이해하기은 {App()}과 같다!App()은 App이라는 함수의 결과값으로 치환되는데, 함수형 컴포넌트의 반환값은 하나의 태그로 감싸진 태그들이다function ComponentEx() { return( ..

• format_list_bulleted 챌린지반
• · 2024. 8. 14.
• textsms

[24.08.13] 개인프로젝트 5일차 - 올림픽 메달 트래커 만들기

어제 개인 프로젝트를 마무리하고 오늘은 개인공부를 진행하려했는데..컴포넌트 분리에대한 가이드를 준다하셔서 갔다가 수정하고싶은 부분이 잔뜩 생겼다 우선 아직 배우지 않은 리액트 기능들이 많은 상태에서 우선적으로 고려하길 추천받은 부분은 아래와 같았다.1. 메인 비즈니스 로직(지금 add, update, delete)이 한 곳에 잘 모여있어야한다 (한눈에 잘 보임, 이후 커스텀 훅으로 관리하기 쉬움)2. state와 state를 관리할 로직들은 모아둔다 그리고 당장 적용을 권하진 않으셨지만 나중에 해보고싶은 것1. 입력을 받는 기능들은 Input 과 같이 html 태그 기본 기능에 의존하게 된다. 이럴 때 범용적으로 사용할 수 있는 Input 컴포넌트를 만들어두면 활용하기 좋다function Input ({..

• format_list_bulleted 일지
• · 2024. 8. 13.
• textsms

[24.08.12] 개인프로젝트 4일차 - 올림픽 메달 트래커 만들기

주말동안 궁금했던 부분에 대해서 좀 더 정리하고 튜터님께도 의견을 구하는 시간을 가졌다 컴포넌트 분리현재 구조를 정리한 여러번 반복되는 부분에 대해서만 컴포넌트로 분리했었는데, 오늘 챌린지반 수업을 듣다보니 내가 전체적인 영역으로 분리해둔 userinput, sortingOptionDropdown, ranking 부분도 컴포넌트로 분리돼야하는건가..? 하는 생각이 들었다.조언을 구해보니 일반적으로는 위의 생각이 맞고, 지금은 간단한 페이지여서 한번만 쓰이는 요소들을 컴포넌트로 만들 필요성이 잘 느껴지지 않지만 나중에 여러 곳에서 form이 쓰인다던가 하는 경우 분리해서 사용하는게 맞다고 한다. 추가로 나는 새로운 데이터가 추가되면서 컴포넌트가 그 갯수에 맞게 반복적으로 출력되는 부분은 rankingIte..

• format_list_bulleted 일지
• · 2024. 8. 12.
• textsms

[24.08.11] 개인프로젝트 3일차 - 올림픽 메달 트래커 만들기

필수 구현 사항들과 내가 생각하기에 처리해둬야하는 추가 사항들을 모두 만든 것 같아 도전 과제 중 남은 것들을 모두 처리해보기로 했다! 정렬기준 추가하기 (총 메달 수 순)ui 만들기우선 정렬 기준을 선택할 드롭다운을 만들었다.드롭다운 메뉴가 보이는 상태인지를 관리할 state와 선택되어있는 옵션을 관리할 state를 선언해주었다. const [sortOption, setSortOption] = useState("금은동 우선순위 순");const [showSortOptionMenu, setShowSortOptionMenu] = useState(false); setShowSortOptionMenu(!showSortOptionMenu)}> {sortOption} {showSortOptionMenu && ..

• format_list_bulleted 일지
• · 2024. 8. 12.
• textsms