본문 바로가기

react14

[React] 재귀적인 구조에서 검색기능 구현하기 프론트엔드 개발을 하면서 컴퓨터의 폴더 구조처럼 재귀적인 구조로 데이터를 렌더링해야 할 때가 있다. 아래 데이터를 보면 Directory 타입은 이름과 하위 Directory들을 가지고 있다. interface Directory { name: string; directory?: Array; } const directory: Array = [ { name: "직박구리", directory: [] }, { name: "가마우지", directory: [ { name: "동고비", directory: [{ name: "곤줄박이" }, { name: "할미새사촌" }], }, { name: "조롱이", directory: [ { name: "말똥박이", directory: [{ name: "오목눈이" }] },.. 2022. 8. 15.
[React/Typescript] html 태그의 기본 props를 사용해 컴포넌트를 만드는법 문자열과 onClick 함수를 props로 전달받는 Button 컴포넌트를 만든다고 가정하면 아래와 같은 컴포넌트를 만들어 쓸 수 있습니다. interface ButtonProps { children: string; onClick: () => void; } const Button = ({ children, onClick }: ButtonProps) => { return {children}; }; export default Button; 그리고 아래와 같이 불러다 쓸 수 있겠죠? import Button from "components/Button"; const App = () => { return console.log("Button Clicked")}>Button; }; export default App;.. 2022. 7. 16.
[React/Typescript] 리액트 컴포넌트 npm 라이브러리로 배포하기 개발자라면 한 번쯤 자기의 코드를 오픈소스로 배포해 보고 싶다는 생각을 해보셨을 거라 믿습니다. 저도 다운로드 수는 작지만 직접 만든 리액트 컴포넌트들을 배포 후 꾸준히 업데이트 중에 있습니다. 오늘은 리액트에서 만든 컴포넌트나 훅들을 npm 라이브러리로 배포하는 법을 알아보겠습니다. 저는 먼저 vite에서 지원해 주는 npm create vite로 react-ts 프로젝트를 생성하였습니다. create-react-app 또는 명령어 없이 리액트 환경을 구성하셔도 됩니다. 그런 다음 컴포넌트를 하나 만들어보겠습니다. components/index.ts에서 한번... /index.ts에서 한번 모듈을 내보내 주겠습니다. 그런 다음 ts파일을 빌드하기 위해 tsconfig-cjs.json 파일과 tsconf.. 2022. 7. 3.
[React] 이미지 모달 구현하기 https://hackids.tistory.com/127 [React] React로 만든 이력서 Github Pages로 배포 및 후기 서론 학교를 졸업하고 취업을 준비한 지도 8개월이 지났습니다. 부족했던 자료구조와 알고리즘 실력을 키우기 위해 백준과 같은 온라인 저지에서 문제도 많이 풀어보고, 종만북이라 불리는 알 hackids.tistory.com 이력서를 리액트로 개발할 때, 이미지 모달 부분이 조금 힘들었던 기억이 있습니다. 라이브러리를 쓰지 않고 구현해보려 노력했고, 기본적인 기능은 나름 갖춘 모달을 완성하였습니다. 리액트와 css만을 이용해서 이미지 모달 구현하는 법을 알아보겠습니다. App.js import { Component } from "react"; import Modal from .. 2021. 10. 21.

티스토리툴바