본문 바로가기

부트캠프교육중/react80

컴포넌트 기반개발에 대해서 # 컴포넌트(component) -하나의 기능 구현을 위한 여러종류의 코드 묶음 -UI를 구성하는 필수 요소 -컴포넌트 여러개 만들고 조합하면 하나의 애플리케이션을 만들수있다. #모든 리액트 애플리케이션은 최소 한개의 컴포넌트를 가지고 있으며, 이 컴포넌트는 애플리케이션 내부적으로는 근원(root)이 되는 역할을 한다. 최상위 컴포넌트는 근원의 역할을 하므로 다른 자식 컴포넌트를 가질수 있다. 이 계층적 구조를 트리구조로 형상화할수있다. #각각의 컴포넌트는 각자 고유의 기능을 가지고 있으면서 UI의 한부분을 담당하고 있다. 이렇게 독립적인 컴포넌트들을 여러개 만들고 이들을 한데 모아 복잡한 ui를 구성할수도 있고, 더 나아가 최종적으로는 복잡한 애플리케이션도 만들수 있다. 2023. 1. 21.
map함수 이용법 const posts = [ { id : 1, title : 'Hello World', content : 'Welcome to learning React!' }, { id : 2, title : 'Installation', content : 'You can install React via npm.' }, { id : 3, title : 'reusable component', content : 'render easy with reusable component.' }, // ... { id : 100, title : 'I just got hired!', content : 'OMG!' }, ]; function Blog() { return ( {posts[0].title} {posts[0].content} {.. 2023. 1. 21.
JSX # JSX (javascript XML) - javascript XML의 줄임말로 문자열도 아니고 html도 아니다 - 리액트에서 UI를 구성할때 사용하는 문법으로 javascript를 확장한 문법이다 - JSX는 자바스크립트가 확장된 문법이지만, 브라우저가 바로 실행할수있는 자바스크립트 코드가 아니다. 그래서 브라우저가 이해할수있는 자바스크립트 코드로 변환을 해주어야한다. 이때 이용하는것이 "Babel"이다. babel은 jsx를 브라우저가 이해할수있는 자바스크립트로 컴파일한다.(babel이 알아서 JSX코드를 변환해준다) 컴파일후 자바스크립트를 브라우저가 읽고 화면에 렌더링할수있다 - 자바스크립트 문법과 html문법을 동시에 이용해 기능과 구조를 한눈에 확인할수있다. 이렇게 구조와 동작에 대한 코드를.. 2023. 1. 21.
리액트의미와 특징 리액트란? 프론트엔드 개발을 위한 자바스크립트 오픈소스 라이브러리이다. 리액트 3가지특징 선언형(declarative) 컴포넌트기반(component-based) 번용성 #선언형(declarative) 명시적. 코드를 자세히 분석하지않고도 코드의 의도를 분명히 알수있게 작성하는방식 한페이지를 보여주기 위해 html/css/js로 나눠서 적기보다는 하나의 파일에 명시적으로 작성할수있게 jsx를 활용한 선언형 프로그래밍을 지향한다. #컴포넌트 기반(component-based) 컴포넌트: 하나의 기능 구현을 위해 여러 종류의 코드를 묶어둔것 컴포넌트로 분리하면 서로 독립적이고 재사용이 가능하기 때문에, 기능 자체에 집중하여 개발할수있다. ex) 전체선택박스가 (selectallcheckbox) 하나의 컴포넌.. 2023. 1. 21.

티스토리툴바