컴포넌트 [앱개발]-리액트개념 React-navigation StatusBar 컴포넌트(Component): 정해진 엘리먼트들(요소)을 사용하여 만든 화면의 일부분 상태(State,useState): 컴포넌트에서 데이터를 유지하고 관리하기 위한 유일한 방법 속성(Props): 상위 컴포넌트에서 하위 컴포넌트로 데이터를 전달하는 방식 == 그냥 데이터 전달 🔍 컴포넌트(Component) 버튼 하나가 컴포넌트가 될 수 있고, 버튼을 모아둔 영역이 컴포넌트가 될 수 있다.... componentreact navigation컴포넌트리액트스택 네비게이션useEffectReactstatusBarExpoExpo [ Vue.js ] Vue 가이드 - 컴포넌트 사용 node : v14.17.1 Vue : v2 를 참고하여 작성 기본 HTML 엘리먼트를 확장하여 재사용 가능한 코드를 캠슐화하는 데 사용 독립적으로 재사용할 수 있는 추상적 개념 컴포넌트로 인해 개발속도와 코드의 가독성, 유지보수성 효율적으로 늘어남 모든 유형의 애플리케이션 인터페이스를 컴포넌트 트리로 추상화 component 예시 1 [ index.html ] [ index.js ] [ R... JavaScriptjscomponent컴포넌트vue.jsJavaScript [CS] React Day-18 페이지를 보여주기 위해서 HTML, CSS, JS로 나누기보다 하나의 파일에 명시하여 작성할 수 있게 도와주는 선언형 프로그래밍입니다. 따라서 "Babel"이라는 친구가 있어야 컴파일하고 브라우저가 읽어 화면에 렌더링 할 수 있습니다. React JSX React는 DOM과 다르게 CSS, JSX문법만을 가지고 웹 애플리케이션을 개발할 수 있습니다. React JSX를 사용하면 DOM(HTM... 범용성component선언형JSX리액트ReactJavaScript XMLReact JSX컴포넌트MapJSX [리액트 기초반] 2주차 - 컴포넌트 이 페이지는 <header>, <container>, <footer> 3개의 컴포넌트로 이루어져 있다. <container>는 다시 <image>와 <contents> 2개의 컴포넌트로 나뉜다. 컴포넌트 ∋ 컴포넌트 구조를 갖는 <container>는 <image>와 <contents>에게 각각의 데이터를 전달한다. 컴포넌트의 생애주기를 일목요연하게 보여주기 때문에 이후에 등장한 함수형 컴포... React스파르타코딩클럽리액트 기초반컴포넌트React [Spring] Chapter 6. 컴포넌트 스캔 지금까지는 자바 코드의 @Bean이나 XML의 <bean>등을 통해 설정 정보에 스프링 빈을 직접 나열하여 등록함 컴포넌트 스캔 : 설정 정보가 없어도 자동으로 스프링 빈 등록 [src/main/java/hello/core/AutoAppConfig.java] 💡 참고 컴포넌트 스캔 사용 시 @Configuration이 붙은 설정 정보도 자동으로 등록됨 일반적으로 설정 정보는 컴포넌트 스캔 대... SCAN컴포넌트component스프링Autowired스캔SpringAutowired [React] 조건부 렌더링 렌더링에 조건을 걸어서 원하는 시점에만 컴포넌트를 렌더링하게 만들 수도 있습니다. 리액트도 당연히 자바스크립트 기반 프레임워크이므로 기존 자바스크립트 조건 문법을 이용하면 됩니다. 첫번째 방법은 if문을 이용한 조건부 렌더링입니다. 우리가 알고있는 if문 용법 그대로 조건에 따라 return하는 컴포넌트를 다르게 설정하면 됩니다. App의 state인 flag를 false로 넘겨줬으니 Say... 조건부 렌더링리액트React컴포넌트React Vue 컴포넌트 Vue와 React는 웹페이지를 만들 때 컴포넌트 기반의 설계를 할 수 있도록 하는 프레임워크/라이브러리이다. 웹페이지의 설계 컨셉은 따라서 거의 동일하다고 볼 수 있다. 다만 기본적인 구현 방식에서는 조금씩 차이가 있다. 전역등록 main.js에서 글로벌 컴포넌트를 선언한다 지역등록 원하는 페이지에서 컴포넌트를 선언한다. import로 컴포넌트 불러오기 components에 등록하기 tem... 컴포넌트리액트vue뷰ReactReact 리액트(React)-html 덩어리로 만들기: 컴포넌트(component) return 안에는 이렇게 평행한? 연속하는? 같은 위치의 div 태그를 만들 수 없다. 여러개를 만들어주고싶다면 이렇게 하나의 큰 div에 감싸주는거 같은 방식을 사용해야 한다. HTML요소 많은걸 묶어서 한 단어로 쓸 수있는 리액트 문법: 사용법 function으로 원하는 함수 하나 만든다. 함수 안에 return() 안에 원하는 HTML 넣는다. 원하는 위치에 아까 만든 축약HTML 덩... component컴포넌트리액트component [TIL] Day-28 App에서 모든 상태를 중앙 관리 하기 때문에 자식 컴포넌트 끼리 의존성이 없다. 필요한 기능이 있다면 컴포넌트만 추가하고 부모의 상태를 이용하면 된다. 자식의 상태에 어떤 값이 들어가는 지에 따라 화면이 그려진다. → 어떤 상태가 바뀌면 그 상태를 사용하는 컴포넌트가 동시에 렌더링이 되도록 해야 함 자식들은 부모의 상태를 물려받아서, 부모의 상태가 변하는 것에 따라 자식들이 변화되도록 해야... 컴포넌트고양이 사진첩프로그래머스고양이 사진첩 📗[React 주요 개념] 1. 컴포넌트, props 항상 대문자로 시작함. props react가 사용자 정의 컴포넌트로 작성한 element를 발견했을 때, 해당 컴포넌트에 전달하는 단일 객체. (JSX 어트리뷰트와 자식) 읽기 전용.(컴포넌트 자체 props는 수정하면 안된다.) ex) Welcome 컴포넌트. 어트리뷰트 name이 props 객체 안에 포함되어 전달됨. 클래스 컴포넌트 자주 사용되지는 않는다고는 함. javascript함... 컴포넌트 종류컴포넌트ReactPropsProps
[앱개발]-리액트개념 React-navigation StatusBar 컴포넌트(Component): 정해진 엘리먼트들(요소)을 사용하여 만든 화면의 일부분 상태(State,useState): 컴포넌트에서 데이터를 유지하고 관리하기 위한 유일한 방법 속성(Props): 상위 컴포넌트에서 하위 컴포넌트로 데이터를 전달하는 방식 == 그냥 데이터 전달 🔍 컴포넌트(Component) 버튼 하나가 컴포넌트가 될 수 있고, 버튼을 모아둔 영역이 컴포넌트가 될 수 있다.... componentreact navigation컴포넌트리액트스택 네비게이션useEffectReactstatusBarExpoExpo [ Vue.js ] Vue 가이드 - 컴포넌트 사용 node : v14.17.1 Vue : v2 를 참고하여 작성 기본 HTML 엘리먼트를 확장하여 재사용 가능한 코드를 캠슐화하는 데 사용 독립적으로 재사용할 수 있는 추상적 개념 컴포넌트로 인해 개발속도와 코드의 가독성, 유지보수성 효율적으로 늘어남 모든 유형의 애플리케이션 인터페이스를 컴포넌트 트리로 추상화 component 예시 1 [ index.html ] [ index.js ] [ R... JavaScriptjscomponent컴포넌트vue.jsJavaScript [CS] React Day-18 페이지를 보여주기 위해서 HTML, CSS, JS로 나누기보다 하나의 파일에 명시하여 작성할 수 있게 도와주는 선언형 프로그래밍입니다. 따라서 "Babel"이라는 친구가 있어야 컴파일하고 브라우저가 읽어 화면에 렌더링 할 수 있습니다. React JSX React는 DOM과 다르게 CSS, JSX문법만을 가지고 웹 애플리케이션을 개발할 수 있습니다. React JSX를 사용하면 DOM(HTM... 범용성component선언형JSX리액트ReactJavaScript XMLReact JSX컴포넌트MapJSX [리액트 기초반] 2주차 - 컴포넌트 이 페이지는 <header>, <container>, <footer> 3개의 컴포넌트로 이루어져 있다. <container>는 다시 <image>와 <contents> 2개의 컴포넌트로 나뉜다. 컴포넌트 ∋ 컴포넌트 구조를 갖는 <container>는 <image>와 <contents>에게 각각의 데이터를 전달한다. 컴포넌트의 생애주기를 일목요연하게 보여주기 때문에 이후에 등장한 함수형 컴포... React스파르타코딩클럽리액트 기초반컴포넌트React [Spring] Chapter 6. 컴포넌트 스캔 지금까지는 자바 코드의 @Bean이나 XML의 <bean>등을 통해 설정 정보에 스프링 빈을 직접 나열하여 등록함 컴포넌트 스캔 : 설정 정보가 없어도 자동으로 스프링 빈 등록 [src/main/java/hello/core/AutoAppConfig.java] 💡 참고 컴포넌트 스캔 사용 시 @Configuration이 붙은 설정 정보도 자동으로 등록됨 일반적으로 설정 정보는 컴포넌트 스캔 대... SCAN컴포넌트component스프링Autowired스캔SpringAutowired [React] 조건부 렌더링 렌더링에 조건을 걸어서 원하는 시점에만 컴포넌트를 렌더링하게 만들 수도 있습니다. 리액트도 당연히 자바스크립트 기반 프레임워크이므로 기존 자바스크립트 조건 문법을 이용하면 됩니다. 첫번째 방법은 if문을 이용한 조건부 렌더링입니다. 우리가 알고있는 if문 용법 그대로 조건에 따라 return하는 컴포넌트를 다르게 설정하면 됩니다. App의 state인 flag를 false로 넘겨줬으니 Say... 조건부 렌더링리액트React컴포넌트React Vue 컴포넌트 Vue와 React는 웹페이지를 만들 때 컴포넌트 기반의 설계를 할 수 있도록 하는 프레임워크/라이브러리이다. 웹페이지의 설계 컨셉은 따라서 거의 동일하다고 볼 수 있다. 다만 기본적인 구현 방식에서는 조금씩 차이가 있다. 전역등록 main.js에서 글로벌 컴포넌트를 선언한다 지역등록 원하는 페이지에서 컴포넌트를 선언한다. import로 컴포넌트 불러오기 components에 등록하기 tem... 컴포넌트리액트vue뷰ReactReact 리액트(React)-html 덩어리로 만들기: 컴포넌트(component) return 안에는 이렇게 평행한? 연속하는? 같은 위치의 div 태그를 만들 수 없다. 여러개를 만들어주고싶다면 이렇게 하나의 큰 div에 감싸주는거 같은 방식을 사용해야 한다. HTML요소 많은걸 묶어서 한 단어로 쓸 수있는 리액트 문법: 사용법 function으로 원하는 함수 하나 만든다. 함수 안에 return() 안에 원하는 HTML 넣는다. 원하는 위치에 아까 만든 축약HTML 덩... component컴포넌트리액트component [TIL] Day-28 App에서 모든 상태를 중앙 관리 하기 때문에 자식 컴포넌트 끼리 의존성이 없다. 필요한 기능이 있다면 컴포넌트만 추가하고 부모의 상태를 이용하면 된다. 자식의 상태에 어떤 값이 들어가는 지에 따라 화면이 그려진다. → 어떤 상태가 바뀌면 그 상태를 사용하는 컴포넌트가 동시에 렌더링이 되도록 해야 함 자식들은 부모의 상태를 물려받아서, 부모의 상태가 변하는 것에 따라 자식들이 변화되도록 해야... 컴포넌트고양이 사진첩프로그래머스고양이 사진첩 📗[React 주요 개념] 1. 컴포넌트, props 항상 대문자로 시작함. props react가 사용자 정의 컴포넌트로 작성한 element를 발견했을 때, 해당 컴포넌트에 전달하는 단일 객체. (JSX 어트리뷰트와 자식) 읽기 전용.(컴포넌트 자체 props는 수정하면 안된다.) ex) Welcome 컴포넌트. 어트리뷰트 name이 props 객체 안에 포함되어 전달됨. 클래스 컴포넌트 자주 사용되지는 않는다고는 함. javascript함... 컴포넌트 종류컴포넌트ReactPropsProps