component 무엇을, 왜 웹 구성 요소. 반응 예 웹 구성 요소의 정의부터 시작하겠습니다. 정의에서 우리는 웹 구성 요소를 사용하여 기본적으로 웹 구성 요소는 기본적으로 사용자 지정 html 태그 집합이기 때문에 html을 사용하는 모든 프로젝트에서 재사용할 수 있는 구성 요소를 생성한다는 것을 알고 있습니다. 이것이 중요한 이유와 웹 구성 요소를 사용하여 프로젝트를 구축할 때의 이점은 무엇입니까? 잘. 그것이 웹 컴포넌트의 아름다움입니다.... componentreactwebpackwebdev Angular의 DI는 구성 요소를 더 스마트하게 만들 수 있습니다. Angular에 내장된 종속성 주입은 매우 강력하며 오늘 우리는 이를 사용하여 구성 요소를 스마트하게 만드는 방법을 살펴보겠습니다. 버튼 구성요소에 대해 알아보겠습니다. 여기에서 버튼 구성 요소가 다양한 구성 옵션을 제공하여 다양한 사용 사례를 처리하는 데 사용할 수 있음을 알 수 있습니다. 이러한 모든 입력을 항상 제공하는 것은 번거로울 수 있으며 불일치로 이어질 수도 있습니다. 이 문제를... angularjavascriptcomponentwebdev Nghệ thuật dựng component trong thực tế-Phần 4 Trong trong hờng hợp bố cục là LTR (Từ trái sang phải) và nội dung tin nhắn bằng tiếng Ả Rập, hướng của nội dung tin nhắn phải là RTL (Từ sangải trái). Điều này có thể được thêm một cách chủ động tùy thuộc vào ngôn ngữ n... htmlcsscomponentreact vue3-easy-data-table이 출시됩니다 vue3-easy-data-table는 Vue.js 3.x로 만든 사용자 지정 가능하고 사용하기 쉬운 데이터 테이블 구성 요소입니다. vue3-easy-data-table는 , 및 과 같은 많은 기본 기능을 제공합니다. 게다가 이 문서에서 확인할 수 있는 고도로 사용자 정의 가능한 많은 기능을 제공합니다. vue3-easy-data-table는 클라이언트 측 또는 에서 사용할 수 있습니다. ... componentvuevue3datatable 각도 구성 요소 목표: 이 기사에서는 구성 요소를 알게 됩니다. 전제 조건 이 문서를 완료하기 전에 Visual Studio Code, NPM(노드 패키지 관리자), Node, Angular CLI를 포함한 모든 전제 조건 도구를 이미 설치해야 합니다. 구성 요소 생성 HTML 마크업에 요소 추가 처음에는 Angular 애플리케이션에 첫 번째 구성 요소를 추가하고 해당 템플릿을 업데이트합니다. 이 문서를 마... angularcomponentdirective React - 기타 구성 요소 O nome da função da nome ao componente, e esse pode ser reutilizados quantas vezes for necessário, sua utilização é usando a sintaxe <Componente/> que é equivalente também a <Componente></Componente> que é o uso mais com... webdevcomponentbeginnersreact 기능적 구성 요소 및 클래스 구성 요소 이해 구성 요소는 모든 반응 앱의 구성 요소이며 UI를 더 작은 조각으로 분할할 수 있습니다. 파일 안에 전체 UI를 빌드하는 대신 UI를 구성 요소라고 하는 다른 파일로 분할할 수 있습니다. 이 작은 UI 조각은 재사용하고 독립적으로 처리할 수 있습니다. 반응하는 구성 요소의 유형 React에는 기능적(상태 비저장 구성 요소)과 클래스(상태 저장 구성 요소)의 두 가지 유형의 구성 요소가 있습니... webdevcomponentjavascriptreact 리팩터링 GoogleMap 구성 요소에 대한 아이디어 암호: 왜요? windows.google와 같은 전역 변수를 사용하고 싶지 않습니다. 플러그인 가능해 보입니다. 지원하는 라이브러리를 넣으면 객체를 로드하고 반환합니다 다른 서비스의 논리를 노출합니다(예: 가까운 장소 및 더 이상 GoogleMap 구성 요소에 넣을 필요 없음) 개선 맵 마커를 소품으로 렌더링할 수 있음 고급 구성 요소가 자식으로 렌더링될 수 있음... mapcomponentreact 미스릴 JS + 퀘이사 CSS? 여기 그 증거가 있습니다. 이것은 dev.to 사이트에 대한 나의 세 번째 글입니다. 이 기사는 Mithril JS와 Quasar CSS를 결합한 개념 증명을 보여줍니다. 은 웹 및 모바일 앱을 위한 훌륭한 프레임워크입니다. JS( 에 따라 다름) 및 CSS의 두 부분으로 구성됩니다. Quasar의 CSS 부분은 많은 클래스(css 규칙)를 정의하고 멋지고 사용자 친화적인 앱을 작성하는 데 필요한 모든 것을 실질적으로... cssmithrilcomponentquasar 다음 경험 프레임워크: actionHandlers에서 섀도우 DOM 노드 선택 d3js 그래프를 렌더링하는 구성 요소를 작성하는 작업이 있었습니다. D3.js는 제공한 데이터를 기반으로 문서를 조작하는 JavaScript 라이브러리입니다. 그래서 내 목표는 구성 요소가 렌더링될 때 구멍 그래프를 만드는 것이었습니다. 이를 위해 몇 가지 구성 요소 수명 주기 작업을 사용할 수 있습니다. 목표를 달성하기 위해 'COMPONENT_DOM_READY'를 사용했습니다. 먼저 다... componentnextexperienceservicenowuxf Angular에서 구성 요소 생성(CLI 사용/수동) 기본적으로 이 명령은 다음을 생성합니다. 구성 요소 이름을 딴 폴더 구성 요소 파일, <component-name>.component.ts 템플릿 파일, <component-name>.component.html CSS 파일, <component-name>.component.css 테스트 사양 파일, <component-name>.component.spec.ts 여기서 <component-na... componentangulartypescript NGX-YOUI - Angular UI 라이브러리 여러분, 안녕하세요. 오늘은 자체 개발한 Angular UI 라이브러리인 NGX-YOUI를 소개하려고 합니다. NGX-YOUI는 콘텐츠와 스타일로 고도로 사용자 정의할 수 있는 Angular UI 라이브러리입니다. Tailwind 또는 Bootstrap과 같은 다른 CSS 프레임워크와 쉽게 통합할 수 있습니다. 이 기사를 읽어 주셔서 감사합니다. 개선할 수 있거나 개선할 수 있는 제안이 있으... angulartypescriptcomponentcss TS 및 롤업으로 재사용 가능한 React 구성 요소 만들기 당신이 한 번에 여러 사이드 프로젝트를 시작하는 나쁜 습관이 있는 저와 같은 개발자라면 인생에서 적어도 한 번은 모든 반응 구성 요소의 컬렉션을 만들어 모든 프로젝트에서 재사용하는 것을 생각했을 것입니다. 이 생각은 2020년에 제 마음에 떠오른 이후 저는 제 미래의 모든 사이드 프로젝트를 위한 원스톱 솔루션을 만들기 위해 노력하고 있습니다. 이 게시물에서는 npm에 게시하고 다른 패키지로 ... typescriptcomponentjavascriptreact Gatsby-Image 및 React Hooks로 슬라이드쇼 만들기 GatsbyJS는 최근 제가 가장 좋아하는 기술 중 하나입니다. 프론트엔드 개발을 다시 즐겁게 만들었습니다. 최근에 비슷한 문제가 발생한 것 같습니다. 즉, 슬라이드쇼/캐러셀/여러 이미지를gastbyjs 및 gatsby-image . TLDR; I built a "slideshow" of lazy loaded images, demo over at 면책 조항: 이것은 꽤 실험적이고 해키적이며 ... gatsbycomponentwebdevreact 바닐라로 상태 기반 렌더링 컴포넌트 만들기 3 - 환경 설정하기 (feat. 보일러 플레이트) 이 시리즈의 이전 글은 아래로... 실제 작업을 위한 환경 설정을 해보쟈! config/#1_Project-Setting 브랜치에서 자세히 확인 하실 수 있습니다! TypeScript: 개발의 생산성, 안정성을 위해 도입 SCSS: 개발의 생산성을 위해 도입 Webpack: 코드 압축, 모듈 이용을 위해 도입 Babel: 크로스 브라우징을 위해 도입 ES Lint: 코드 품질을 위해 도입 P... typescriptcomponentvanilla바닐라 타입스크립트ReactReact 바닐라로 상태 기반 렌더링 컴포넌트 만들기 2 - 상태 기반 렌더링은 어떻게 하는걸까? 각자 상태(state)를 기반으로 렌더링 CSR (Client Side Rendering): 브라우저에서 자바스크립트를 이용하여 렌더링을 하는 렌더링 방식 Entry Point: 자바스크립트로 열심히 그린 Element들을 넣어주는 데에 이용이 되는 시작점 2. 최상위 App 컴포넌트 만들어주기 App 컴포넌트는 자체적인 상태(state)를 가지고 있다. 하위 컴포넌트에서는 이벤트를 전달하고... typescriptcomponentvanilla바닐라 타입스크립트ReactReact [Spring] 스프링 핵심 원리 - 기본편 스프링에서 이야기하는 제어의 역전(IoC), 의존관계 주입(DI)은 다형성을 활용해서 역할과 구현을 편리하게 다룰 수 있도록 지원한다. OCP(개방-폐쇄 원칙)* : 확장에는 열려있으나 변경에는 닫혀있어야 한다 -> 스프링 컨테이너가 OCP를 지켜줌 DIP(의존관계 역전 원칙)* : 추상화에 의존해야지, 구체화에 의존하면 안된다. 스프링 컨테이너 생성 방법 빈 등록 방법 스프링 컨테이너 > ... 빈생명주기싱글톤di@PostConstruct/@PreDestroyAppConfigSpring Bean빈스코프componentSOLID@PostConstruct/@PreDestroy [앱개발]-리액트개념 React-navigation StatusBar 컴포넌트(Component): 정해진 엘리먼트들(요소)을 사용하여 만든 화면의 일부분 상태(State,useState): 컴포넌트에서 데이터를 유지하고 관리하기 위한 유일한 방법 속성(Props): 상위 컴포넌트에서 하위 컴포넌트로 데이터를 전달하는 방식 == 그냥 데이터 전달 🔍 컴포넌트(Component) 버튼 하나가 컴포넌트가 될 수 있고, 버튼을 모아둔 영역이 컴포넌트가 될 수 있다.... componentreact navigation컴포넌트리액트스택 네비게이션useEffectReactstatusBarExpoExpo React-Native [5. React의 필수 개념 : 컴포넌트, 속성, 상태, useEffect] 화면의 조각조각. 작은 컴포넌트들이 하나의 큰 컴포넌트를 구성한다. 컴포넌트에 데이터를 전달하는 기능! 규칙 1. Key & Value (content={content}) 형태로 전달 2. 컴포넌트 반복문 실행시, map에서 나오는 인덱스(i)를 key = {i} 속성 전달 형태로 꼭 넣을것! 컴포넌트에서 보유/관리되는 데이터! UI는 컴포넌트의 상태에 따라 다르게 표현된다. 따라서 리액트는... componentPropsuseEffectReactStateProps 12.5시간이 12.5초 같았던 개발자가 되기위한 두번째 발자국 (Code camp FE 6기) - Algorithm Self study 아침에 등원해서 알고리즘 문제풀고, 개념 익히는 시간 ! 내 알고리즘 노션 페이지 ! 이렇게 비슷한 언어들로 react하나를 잘하면 웹, 안드로이드, IOS , 데스크톱 모두 만들수 있다는 점 !!! -원본 하나를 만들어서 뿌려주는 개념 (원본변경하면 모두 적용 됨) 함수형이 훨씬 효율적이긴 하지만, 실무에서 클래스형을 쓰고있는 곳이 많으니 둘다 알아... hooks프론트엔드component202203코드캠프6기React202203 #9.React(Componet재사용, filter를 활용한 검색기능) 인스타그램 클론코딩을 진행해보면서 하나의 피드 Component를 만들었던 것을 가지고 데이터를 통해 map을 활용하여 여러개의 피드를 찍은것을 보며 React의 장점을 다시금 알게 되었다. 1. Monsters.js에서 먼저 fetch함수를 통해 데이터를 전달받고, 이를 json형태로 전환한뒤, State에 저장. 그러면 이러한 형태의 데이터가 State에 담기게 되고, 이 데이터를 활용하... ReactfiltercomponentReact React | React - component 컴포넌트는 react를 함에 가장중요한 요소이다. 컴포넌트를 이해하지 않으면 react를 진행할 수 없다. 일단 정의는 재활용 가능한 UI 구성단위를 뜻한다. 멘토님들이 자주 말하는것 === 중요한것 컴포넌트의 종류에는 Class 형 컴포넌트와 Function 형 컴포넌트가 있다. 근데 우선 먼저 배우는게 클래스형이니 클래스형만 적어놔야겠다 나중에 또 배우면 수정해야지. 위처럼 생겨먹은 구조... ReactJSXcomponentJSX 첫 React 컴포넌트 react component의 특징은 독립적이고 재사용 가능하다는 특징이 있습니다. component 에 종류는 클래스형(class)과 함수형(function)이 있습니다. component 를 만들때는 components라는 파일안에 만들어 주어야 한다. src파일 안에 components라는 파일을 만들어준다. 그 후 components 파일 안에 HelloWorld.jsx라는 파일을 만... ReactcomponentReact
무엇을, 왜 웹 구성 요소. 반응 예 웹 구성 요소의 정의부터 시작하겠습니다. 정의에서 우리는 웹 구성 요소를 사용하여 기본적으로 웹 구성 요소는 기본적으로 사용자 지정 html 태그 집합이기 때문에 html을 사용하는 모든 프로젝트에서 재사용할 수 있는 구성 요소를 생성한다는 것을 알고 있습니다. 이것이 중요한 이유와 웹 구성 요소를 사용하여 프로젝트를 구축할 때의 이점은 무엇입니까? 잘. 그것이 웹 컴포넌트의 아름다움입니다.... componentreactwebpackwebdev Angular의 DI는 구성 요소를 더 스마트하게 만들 수 있습니다. Angular에 내장된 종속성 주입은 매우 강력하며 오늘 우리는 이를 사용하여 구성 요소를 스마트하게 만드는 방법을 살펴보겠습니다. 버튼 구성요소에 대해 알아보겠습니다. 여기에서 버튼 구성 요소가 다양한 구성 옵션을 제공하여 다양한 사용 사례를 처리하는 데 사용할 수 있음을 알 수 있습니다. 이러한 모든 입력을 항상 제공하는 것은 번거로울 수 있으며 불일치로 이어질 수도 있습니다. 이 문제를... angularjavascriptcomponentwebdev Nghệ thuật dựng component trong thực tế-Phần 4 Trong trong hờng hợp bố cục là LTR (Từ trái sang phải) và nội dung tin nhắn bằng tiếng Ả Rập, hướng của nội dung tin nhắn phải là RTL (Từ sangải trái). Điều này có thể được thêm một cách chủ động tùy thuộc vào ngôn ngữ n... htmlcsscomponentreact vue3-easy-data-table이 출시됩니다 vue3-easy-data-table는 Vue.js 3.x로 만든 사용자 지정 가능하고 사용하기 쉬운 데이터 테이블 구성 요소입니다. vue3-easy-data-table는 , 및 과 같은 많은 기본 기능을 제공합니다. 게다가 이 문서에서 확인할 수 있는 고도로 사용자 정의 가능한 많은 기능을 제공합니다. vue3-easy-data-table는 클라이언트 측 또는 에서 사용할 수 있습니다. ... componentvuevue3datatable 각도 구성 요소 목표: 이 기사에서는 구성 요소를 알게 됩니다. 전제 조건 이 문서를 완료하기 전에 Visual Studio Code, NPM(노드 패키지 관리자), Node, Angular CLI를 포함한 모든 전제 조건 도구를 이미 설치해야 합니다. 구성 요소 생성 HTML 마크업에 요소 추가 처음에는 Angular 애플리케이션에 첫 번째 구성 요소를 추가하고 해당 템플릿을 업데이트합니다. 이 문서를 마... angularcomponentdirective React - 기타 구성 요소 O nome da função da nome ao componente, e esse pode ser reutilizados quantas vezes for necessário, sua utilização é usando a sintaxe <Componente/> que é equivalente também a <Componente></Componente> que é o uso mais com... webdevcomponentbeginnersreact 기능적 구성 요소 및 클래스 구성 요소 이해 구성 요소는 모든 반응 앱의 구성 요소이며 UI를 더 작은 조각으로 분할할 수 있습니다. 파일 안에 전체 UI를 빌드하는 대신 UI를 구성 요소라고 하는 다른 파일로 분할할 수 있습니다. 이 작은 UI 조각은 재사용하고 독립적으로 처리할 수 있습니다. 반응하는 구성 요소의 유형 React에는 기능적(상태 비저장 구성 요소)과 클래스(상태 저장 구성 요소)의 두 가지 유형의 구성 요소가 있습니... webdevcomponentjavascriptreact 리팩터링 GoogleMap 구성 요소에 대한 아이디어 암호: 왜요? windows.google와 같은 전역 변수를 사용하고 싶지 않습니다. 플러그인 가능해 보입니다. 지원하는 라이브러리를 넣으면 객체를 로드하고 반환합니다 다른 서비스의 논리를 노출합니다(예: 가까운 장소 및 더 이상 GoogleMap 구성 요소에 넣을 필요 없음) 개선 맵 마커를 소품으로 렌더링할 수 있음 고급 구성 요소가 자식으로 렌더링될 수 있음... mapcomponentreact 미스릴 JS + 퀘이사 CSS? 여기 그 증거가 있습니다. 이것은 dev.to 사이트에 대한 나의 세 번째 글입니다. 이 기사는 Mithril JS와 Quasar CSS를 결합한 개념 증명을 보여줍니다. 은 웹 및 모바일 앱을 위한 훌륭한 프레임워크입니다. JS( 에 따라 다름) 및 CSS의 두 부분으로 구성됩니다. Quasar의 CSS 부분은 많은 클래스(css 규칙)를 정의하고 멋지고 사용자 친화적인 앱을 작성하는 데 필요한 모든 것을 실질적으로... cssmithrilcomponentquasar 다음 경험 프레임워크: actionHandlers에서 섀도우 DOM 노드 선택 d3js 그래프를 렌더링하는 구성 요소를 작성하는 작업이 있었습니다. D3.js는 제공한 데이터를 기반으로 문서를 조작하는 JavaScript 라이브러리입니다. 그래서 내 목표는 구성 요소가 렌더링될 때 구멍 그래프를 만드는 것이었습니다. 이를 위해 몇 가지 구성 요소 수명 주기 작업을 사용할 수 있습니다. 목표를 달성하기 위해 'COMPONENT_DOM_READY'를 사용했습니다. 먼저 다... componentnextexperienceservicenowuxf Angular에서 구성 요소 생성(CLI 사용/수동) 기본적으로 이 명령은 다음을 생성합니다. 구성 요소 이름을 딴 폴더 구성 요소 파일, <component-name>.component.ts 템플릿 파일, <component-name>.component.html CSS 파일, <component-name>.component.css 테스트 사양 파일, <component-name>.component.spec.ts 여기서 <component-na... componentangulartypescript NGX-YOUI - Angular UI 라이브러리 여러분, 안녕하세요. 오늘은 자체 개발한 Angular UI 라이브러리인 NGX-YOUI를 소개하려고 합니다. NGX-YOUI는 콘텐츠와 스타일로 고도로 사용자 정의할 수 있는 Angular UI 라이브러리입니다. Tailwind 또는 Bootstrap과 같은 다른 CSS 프레임워크와 쉽게 통합할 수 있습니다. 이 기사를 읽어 주셔서 감사합니다. 개선할 수 있거나 개선할 수 있는 제안이 있으... angulartypescriptcomponentcss TS 및 롤업으로 재사용 가능한 React 구성 요소 만들기 당신이 한 번에 여러 사이드 프로젝트를 시작하는 나쁜 습관이 있는 저와 같은 개발자라면 인생에서 적어도 한 번은 모든 반응 구성 요소의 컬렉션을 만들어 모든 프로젝트에서 재사용하는 것을 생각했을 것입니다. 이 생각은 2020년에 제 마음에 떠오른 이후 저는 제 미래의 모든 사이드 프로젝트를 위한 원스톱 솔루션을 만들기 위해 노력하고 있습니다. 이 게시물에서는 npm에 게시하고 다른 패키지로 ... typescriptcomponentjavascriptreact Gatsby-Image 및 React Hooks로 슬라이드쇼 만들기 GatsbyJS는 최근 제가 가장 좋아하는 기술 중 하나입니다. 프론트엔드 개발을 다시 즐겁게 만들었습니다. 최근에 비슷한 문제가 발생한 것 같습니다. 즉, 슬라이드쇼/캐러셀/여러 이미지를gastbyjs 및 gatsby-image . TLDR; I built a "slideshow" of lazy loaded images, demo over at 면책 조항: 이것은 꽤 실험적이고 해키적이며 ... gatsbycomponentwebdevreact 바닐라로 상태 기반 렌더링 컴포넌트 만들기 3 - 환경 설정하기 (feat. 보일러 플레이트) 이 시리즈의 이전 글은 아래로... 실제 작업을 위한 환경 설정을 해보쟈! config/#1_Project-Setting 브랜치에서 자세히 확인 하실 수 있습니다! TypeScript: 개발의 생산성, 안정성을 위해 도입 SCSS: 개발의 생산성을 위해 도입 Webpack: 코드 압축, 모듈 이용을 위해 도입 Babel: 크로스 브라우징을 위해 도입 ES Lint: 코드 품질을 위해 도입 P... typescriptcomponentvanilla바닐라 타입스크립트ReactReact 바닐라로 상태 기반 렌더링 컴포넌트 만들기 2 - 상태 기반 렌더링은 어떻게 하는걸까? 각자 상태(state)를 기반으로 렌더링 CSR (Client Side Rendering): 브라우저에서 자바스크립트를 이용하여 렌더링을 하는 렌더링 방식 Entry Point: 자바스크립트로 열심히 그린 Element들을 넣어주는 데에 이용이 되는 시작점 2. 최상위 App 컴포넌트 만들어주기 App 컴포넌트는 자체적인 상태(state)를 가지고 있다. 하위 컴포넌트에서는 이벤트를 전달하고... typescriptcomponentvanilla바닐라 타입스크립트ReactReact [Spring] 스프링 핵심 원리 - 기본편 스프링에서 이야기하는 제어의 역전(IoC), 의존관계 주입(DI)은 다형성을 활용해서 역할과 구현을 편리하게 다룰 수 있도록 지원한다. OCP(개방-폐쇄 원칙)* : 확장에는 열려있으나 변경에는 닫혀있어야 한다 -> 스프링 컨테이너가 OCP를 지켜줌 DIP(의존관계 역전 원칙)* : 추상화에 의존해야지, 구체화에 의존하면 안된다. 스프링 컨테이너 생성 방법 빈 등록 방법 스프링 컨테이너 > ... 빈생명주기싱글톤di@PostConstruct/@PreDestroyAppConfigSpring Bean빈스코프componentSOLID@PostConstruct/@PreDestroy [앱개발]-리액트개념 React-navigation StatusBar 컴포넌트(Component): 정해진 엘리먼트들(요소)을 사용하여 만든 화면의 일부분 상태(State,useState): 컴포넌트에서 데이터를 유지하고 관리하기 위한 유일한 방법 속성(Props): 상위 컴포넌트에서 하위 컴포넌트로 데이터를 전달하는 방식 == 그냥 데이터 전달 🔍 컴포넌트(Component) 버튼 하나가 컴포넌트가 될 수 있고, 버튼을 모아둔 영역이 컴포넌트가 될 수 있다.... componentreact navigation컴포넌트리액트스택 네비게이션useEffectReactstatusBarExpoExpo React-Native [5. React의 필수 개념 : 컴포넌트, 속성, 상태, useEffect] 화면의 조각조각. 작은 컴포넌트들이 하나의 큰 컴포넌트를 구성한다. 컴포넌트에 데이터를 전달하는 기능! 규칙 1. Key & Value (content={content}) 형태로 전달 2. 컴포넌트 반복문 실행시, map에서 나오는 인덱스(i)를 key = {i} 속성 전달 형태로 꼭 넣을것! 컴포넌트에서 보유/관리되는 데이터! UI는 컴포넌트의 상태에 따라 다르게 표현된다. 따라서 리액트는... componentPropsuseEffectReactStateProps 12.5시간이 12.5초 같았던 개발자가 되기위한 두번째 발자국 (Code camp FE 6기) - Algorithm Self study 아침에 등원해서 알고리즘 문제풀고, 개념 익히는 시간 ! 내 알고리즘 노션 페이지 ! 이렇게 비슷한 언어들로 react하나를 잘하면 웹, 안드로이드, IOS , 데스크톱 모두 만들수 있다는 점 !!! -원본 하나를 만들어서 뿌려주는 개념 (원본변경하면 모두 적용 됨) 함수형이 훨씬 효율적이긴 하지만, 실무에서 클래스형을 쓰고있는 곳이 많으니 둘다 알아... hooks프론트엔드component202203코드캠프6기React202203 #9.React(Componet재사용, filter를 활용한 검색기능) 인스타그램 클론코딩을 진행해보면서 하나의 피드 Component를 만들었던 것을 가지고 데이터를 통해 map을 활용하여 여러개의 피드를 찍은것을 보며 React의 장점을 다시금 알게 되었다. 1. Monsters.js에서 먼저 fetch함수를 통해 데이터를 전달받고, 이를 json형태로 전환한뒤, State에 저장. 그러면 이러한 형태의 데이터가 State에 담기게 되고, 이 데이터를 활용하... ReactfiltercomponentReact React | React - component 컴포넌트는 react를 함에 가장중요한 요소이다. 컴포넌트를 이해하지 않으면 react를 진행할 수 없다. 일단 정의는 재활용 가능한 UI 구성단위를 뜻한다. 멘토님들이 자주 말하는것 === 중요한것 컴포넌트의 종류에는 Class 형 컴포넌트와 Function 형 컴포넌트가 있다. 근데 우선 먼저 배우는게 클래스형이니 클래스형만 적어놔야겠다 나중에 또 배우면 수정해야지. 위처럼 생겨먹은 구조... ReactJSXcomponentJSX 첫 React 컴포넌트 react component의 특징은 독립적이고 재사용 가능하다는 특징이 있습니다. component 에 종류는 클래스형(class)과 함수형(function)이 있습니다. component 를 만들때는 components라는 파일안에 만들어 주어야 한다. src파일 안에 components라는 파일을 만들어준다. 그 후 components 파일 안에 HelloWorld.jsx라는 파일을 만... ReactcomponentReact