https://ko.reactjs.org/docs/components-and-props.html 1. 프로퍼티(props)란? - props(properties의 줄임말) - 상위 컴포넌트가 하위 컴포넌트에 값을 전달할때 사용(단방향 데이터 흐름) - 수정할 수 없음(자식입장에선 읽기 전용인 데이터) 2. 사용방법? - 프로퍼티에 문자열을 전달할 때는 큰따옴표(" ")를, 문자열 외의 값을 전달할 때는 중괄호({ })를 사용 한다. 1) 1개의 프로퍼티 넘기기 - 앞서 3개의 컴포넌트를 만들어 다음과 같은 화면을 구성하였다. (Header, Footer, Main) - 이와 같이 단순한 하드 코딩을 props를 통해 개선해 보자. - App 컴포넌트에서 Main컴포넌트에 "name"이라는 이름, "갓대희..

https://ko.reactjs.org/docs/components-and-props.html 1. 리액트 컴포넌트(Component)란? - 리액트로 만들어진 앱을 이루는 최소한의 단위 - 기존 웹 프레임워크 : MVC 방식으로 분리하여 관리하여 각 요소의 의존성이 높아 재활용이 어려움. 컴포넌트 : MVC의 뷰를 독립적으로 구성하여 재사용 가능, 새로운 컴포넌트 쉽게 만들 수 있음 - 데이터(props)를 입력받아 View(state) 상태에 따라 DOM Node를 출력하는 함수. - 이름 : 항상 대문자로 시작 (리액트는 소문자로 시작하는 컴포넌트를 DOM 태그로 취급하기 때문) - UI를 재사용 가능한 개별적인 여러 조각으로 나누고, 각 조각을 개별적으로 나누어 코딩 - "props"라고 하는 ..

리액트 공식 문서, 자습서에서는 컴포넌트를 알아보기 앞서 엘리먼트 렌더링이라는 내용을 기술하고 있어, 이부분도 가볍게 살펴 보고 가려고 한다. 이번장은 거의 공식문서의 내용이 다이니, 해당 문서를 참고하는것도 좋을 것 같다. https://ko.reactjs.org/docs/rendering-elements.html 1. 엘리먼트란? - 리액트에서 가장 작은 단위 - 화면에 표시할 내용을 기술 ex) 엘리먼트 예시 const element = hello, GodDaeHee!~; - 위의 예시에서 보듯, 우리가 예전에 사용하던 브라우저의 DOM 엘리먼트와는 다르게 일반 객체로 볼 수 있음 - 쉽게 생각하면, 엘리먼트는 컴포넌트의 구성 요소이고, 반대로 컴포넌트를 엘리먼트로 구성되어 있다고 생각 할 수 있는..

1. JSX란? - JSX(JavaScript XML) - JavaScript에 XML을 추가한 확장 문법. - 리액트로 프로젝트를 개발할 때 사용되므로, 공식적인 자바스크립트 문법은 아님 - 브라우저에서 실행하기 전, 바벨을 사용하여 일반 자바스크립트 형태의 코드로 변환 됨 ex) // 실제 작성할 JSX 예시 function App() { return ( Hello, GodDaeHee! ); } // 위와 같이 작성하면, 바벨이 다음과 같이 자바스크립트로 해석하여 준다. function App() { return React.createElement("h1", null, "Hello, GodDaeHee!"); } - JSX는 하나의 파일에 자바스크립트와 HTML을 동시에 작성하여 편리하다. 2. JSX..

1. React 시작하기(2) 리액트의 주요 특징 1. 리액트란? - 자바스크립트 라이브러리 - SPA(Single Page Application)를 위한 사용자 인터페이스를 구축하는데 사용됨 - 웹 모바일 앱 등의 view layer를 처리하는데 사용 됨 - 페이지를 다시 로드하지 않고 데이터를 변경할 수 있도록 가상 돔(Virtual DOM)을 사용하여 웹 어플리케이션의 퍼포먼스를 최적화한 라이브러리 더보기 SPA(Single Page Application)란? 기존 웹 서비스 - 요청시마다 서버로부터 리소스들과 데이터를 해석하고 화면에 렌더링 하는 방식 SPA - 최초에 한번 페이지를 전체를 로드하고, 특정 부분만 Ajax를 통해 데이터를 바인딩 하는 방식 위의 이미지 처럼 컴포넌트들이 모여 한 페..

Introduction https://hjban-dev.github.io/2020-02-21-react-hooks1 실전형 리액트 Hooks 10가지 - Introduction 프로그래밍을 공부하며 배운점 느낀점을 기록하는 곳입니다. hjban-dev.github.io useState https://hjban-dev.github.io/2020-02-21-react-hooks2 실전형 리액트 Hooks 10가지 - useState 프로그래밍을 공부하며 배운점 느낀점을 기록하는 곳입니다. hjban-dev.github.io useInput(useState) https://hjban-dev.github.io/2020-03-01-react-hooks3 실전형 리액트 Hooks 10가지 - useInput(use..