# component
#7. 링크서비스 React Componet 제작
컴포넌트는 크게 3가지로 구분하여 작성했다.1\. API URL을 관리하는 api.config.js2\. AXIOS로 API을 호출하여 리턴 받는 service.js3\. service을 받아 화면에 출력해주는 컴포넌트들디렉토리는 src 밑에 /component 에 /
[React] 공통 컴포넌트 개선과 팀내 코드 가독성 개선을 위한 제안 - classNames plug-in
프로젝트가 어느덧 중반에 가까워져가고 있다. 초안 상태의 코드들이 어느 정도 리팩토링을 거듭하면서 개선되어가고 있다. 나는 공통 컴포넌트인 Counter를 맡아 구현을 했는데 연이은 몇 가지 문제가 발생했다.그리고 문제 해결과정에서 코드의 가독성과 효율성을 해치는 문제
💻 TIL 23.03.16
처음으로 진행해보는 migration이라서 어떻게 시작할지 막막해서 계획을 세워보기로 했다.현재 우리 페이지는 auth.xxx.com, learn.xxx.com, main.xxx.com, admin.xxx.com 4개로 이뤄져있다.같은 NavBar를 사용하는 learn
Components, props와 State
React Component와 Component 내에서 DOM에 의해 읽기 전용으로 전달되는 객체인 props, Component 캡슐화를 가능하게 하는 State 및 Component LifeCycle
리액트 소스코드 뜯어보기 #1(class)
앞서 'prototype' 이라는 개념을 숙지해야 한다.JS에서 모든 객체는 자신의 부모 객체를 가리키는 'proto' 속성을 가지는데 이렇게 연결된 객체들의 체인을 프로토타입 체인이라고 부른다.'prototype'은 함수 객체에만 존재하는 속성으로 함수로 생성된 객체
타입스크립트 Generic을 활용하여 재사용할 수 있는 테이블 컴포넌트 만들기
정적인 데이터를 활용해 단순히 렌더링만 해주기 때문에 테이블의 모양이 바뀌거나 데이터가 다른 경우 재사용성이 낮아진다이 쯤에서 보통 "테이블 렌더링을 데이터를 받는 컴포넌트로 분리해보자" 라고 생각하게 된다. Table.tsx App.tsxdata를 전달해 그려주는 컴
[React] component 문법
다른 함수 바깥에 function 만들고 함수명은 첫글자 대문자로 사용함수 안에 return()문 담아주고 안에 html 담기<함수명></함수명> or <함수명/> 으로 사용하기주의: 컴포넌트 함수에는 다른 함수의 변수 사용할 수 없음
About React #1
한국어로 된 공식 홈페이지도 있지만 영어 홈페이지보다 업데이트가 느리다. 영어 홈페이지에서 번역하면서 읽는 게 낫다!몇몇 귀동냥과 프로젝트 경험 결과 공식 홈페이지가 제일이더라. 그래서 리액트 홈페이지를 열심히 뒤져볼 생각이다.리액트 홈페이지에 가보면 메인 페이지에 제
필터, 인터셉터 - Filter를 등록하는 4가지 방법
이 글은 인프런의 김영한님의 스프링 MVC 2편을 보다가 "섹션 7. 로그인 처리 2 - 필터, 인터셉터"의 "정리" 부분에서 나오는 필터를 등록하는 다른 방법이 지금 내 환경(Spring boot 3.0)에서 먹히지 않아, 궁금해져서 찾은 내용을 담고 있다.설정을 위
[React] component에 대하여
Component 1. 언제 사용하는지? 2. 컴포넌트 문법 - function 사용 3. 컴포넌트 문법 - let 사용 4. Fragment 문법 5. <함수명></함수명> == <함수명/>
React style 적용
조별 프로젝트 진행에 앞서컴포넌트를 각자 맡아리액트 스타일을 적용해보고 있는데일일이 const로 태그 걸어서 하니까 태그 const도 너무 많아지고태그 걸어야하는게 너무 많아져야 한다는 불편함을 느낌...ㅠ그래서 좀 더 단순화하는 방법 없을까 찾다가styled-comp
React | useMemo(), useCallback(), + React.memo()
useMemo는 컴포넌트의 성능을 최적화시킬 수 있는 대표적인 react hooks 중 하나!useMemo에서 Memo는 Memoization을 뜻한다.\* memoization ? 메모이제이션 ? : 컴퓨터 프로그램이 동일한 계산을 반복해야 할 때, 이전에 계산한 값
[React] 리액트 컴포넌트(Component), props
: 리액트로 만들어진 앱을 이루는 최소한의 단위기존의 웹 프레임워크는 MVC 방식으로 분리하여 관리하기 때문에 각 요소의 의존성이 높아 재활용이 어렵다는 단점이 있었다.반면, 컴포넌트는 MVC 의 뷰를 독립적으로 구성하여 재사용을 할 수있고, 이를 통해 컴포넌트를 쉽게