유니의 개발일지

Component 합성 : 여러 개의 컴포넌트를 합쳐서 하나의 컴포넌트를 만드는 것 리액트는 컴포넌트 안에 또 다른 컴포넌트를 만들 수 있기에 복잡한 화면을 여러 개의 Component로 나눠서 구현 가능! Component 추출 : 복잡한 컴포넌트를 쪼개서 여러 개의 컴포넌트로 나눌 수 있음 컴포넌트의 재사용성이 올라감 -> 개발 속도도 향상됨

Component 만드는 방법 Component = Function Component 함수 컴포넌트 + Class Component Function Component 함수 컴포넌트 : 간단한 코드를 장점으로 가짐 Class Component : JavaScript ES6의 class 라는 것을 사용해서 만들어진 형태의 컴포넌트 리액트의 모든 클래스 컴포넌트는 React.Component를 상속받아서 만든다. Component 이름 짓는 방법 Component 이름은 항상 대문자로 시작해야 한다! cause, react는 소문자로 시작하는 컴포넌트를 DOM 태그로 인식하기 때문 const element = ; -> HTML div 태그로 인식 const element = ; -> Welcome이라는 리액트..

Props의 특징 1) Read-Only : 읽기 전용 / 값을 변경할 수 없음 ex) 붕어빵이 다 구워졌는데, 속재료를 바꿀 수 없는 것과 같음 If, 다른 Props의 값으로 앨리먼트를 생성하고 싶다면, 새로운 값을 컴포넌트에 전달하여 새로 Element를 생성 "Pure 함수" : 입력값 input을 변경하지 않으며, 같은 입력값에 대해서는 항상 같은 출력값 output을 리턴 " impure 함수" : 입력값 input을 변경함 "모든 리액트 컴포넌트는 그들의 Props에 관해서는 pure 함수 같은 역할을 해야 한다." : 모든 리액트 컴포넌트는 props를 직접 바꿀 수 없고, 같은 props에 대해서는 항상 같은 결과를 보여줄 것! Props 사용법 1) JSX를 사용하는 경우 키와 값으로 ..

Components : 리액트에서는 모든 페이지가 컴포넌트로 구성되어 있고 하나의 컴포넌트는 또 다른 여러 개의 컴포넌트의 조합으로 구성될 수 있음 레고 블록 조립하듯 컴포넌트들을 모아서 개발 리액트 컴포넌트는 개념적으로 자바스크립트의 함수와 비슷함 -> 입력을 받아서 정해진 출력을 냄 리액트 컴포넌트에서의 입력 : Props 출력 : React element 리액트 컴포넌트의 역할 : 어떠한 속성들을 입력으로 받아서 그에 맞는 react element를 생성하여 리턴해주는 것 마치, 붕어빵을 만드는 것과 비슷함 / 붕어빵 틀 = component Props : 리액트 컴포넌트의 입력 / 리액트 컴포넌트의 속성 prop의 복수형 -> prop은 property의 준말 (속성) ex) props = 붕어빵..

Elements의 특징 1) 불변성 immutable : 한번 생성된 엘리먼트는 변하지 않는다 것을 의미 엘리먼트 생성 후에는 Children이나 attributes를 바꿀 수 없음 -> 엘리먼트는 다양한 모습으로 존재할 수 있지만 한번 생성된 다음에는 변경이 불가능하다는 의미 *화면에 변경된 엘리먼트들을 보여주는 방법 : 기존 엘리먼트를 변경하는 것이 아니라 새로운 엘리먼트를 만들면 된다 새로운 엘리먼트를 만들어서 기존 엘리먼트가 연결되어 있는 부분에 바꿔서 달면 된다. Elements 렌더링 : 엘리먼트를 생성한 이후에 실제로 화면에 보여주기 위해서 필요한 과정 : 이 div 태그 안에 리액트 엘리먼트들이 렌더링 됨 -> root DOM node 이 div 태그 안에 있는 모든 것이 react DOM..

Rendering Elements Elements란? : 어떤 물체를 구성하는 성분 / 리액트 앱을 구성하는 요소 Elements are the smallest building blocks of React apps. : 컴포넌트 유형과 속성 및 내부의 모든 지식에 대한 정보를 포함하고 있는 일반적인 자바스크립트 객체 불변성을 가짐 리액트 앱을 구성하는 가장 작은 빌딩 블록들 화면에서 보이는 것들을 기술 엘리먼트가 기술한 내용을 토대로 실제 우리가 화면에서 보게 되는 dom element가 생성됨 React Elements vs. DOM Elements descriptor : 화면에 나타나는 내용을 기술하는 자바스크립트 객체 -> 최종적으로 나타나는 형태 = DOM Elements react element..

JSX의 장점 1) 간결한 코드 2) 가독성 향상 가독성은 코드 작성 뿐만 아니라 유지 보수 관점에서도 굉장히 중요한 부분 가독성이 높을수록 버그를 발견하기 쉬움! 3) Injection Attacks 방어 보완성이 올라감 Injection attack : 입력창에 문자나 숫자 같은 일반적인 값이 아닌 소스 코드를 입력하여 해당 코드가 실행되도록 만드는 해킹 ReactDOM은 렌더링하기 전에 인베딩된 값을 모두 문자열로 변환 -> 명시적으로 선언되지 않은 값은 괄호 사이에 들어갈 수 없음 JSX 사용법 : 모든 자바스크립트 문법을 지원함 + XML/HTML을 섞어서 사용 HTML 태그 중간에 JavaScript 사용하고 싶은 경우 XML/HTML을 사용하다가 중간에 JavaScript 코드를 사용하고 싶..

JS : JavaScript의 약어 JSX : A syntax extension to JavaScript 자바스크립트의 확장 문법 JavaScript + XML/HTML EX) JSX code const element = Hello, world! -> h1 태그로 둘러싸인 문자열을 element라는 변수에 저장하는 것 JSX 역할 JSX는 내부적으로 XML, HTML 코드를 JavaScript로 변환하는 과정을 거치게 된다. React의 createElement 함수 : JSX 코드를 JavaScript 코드로 변환하는 역할 EX) # JSX를 사용한 코드 class Hello extends React.Component { render() { return Hello {this.props.toWhat}; ..

React로 웹사이트 개발할 때는 주로 Create React App이라는 것을 사용 Create React App (CRA) : React로 웹 애플리케이션을 개발하는데 필요한 모든 설정이 되어 있는 상태로 프로젝트를 생성해주는 도구 : npx 명령어를 이용하여 실행 npx : npm 패키지를 설치한 이후에 곧바로 실행, 엑스큐트까지 해주는 명령어 : 패키지를 간편하게 한번에 처리하기 위해 사용함 #사용법 $ npx create-react-app 명령어들 $ cd my-app : 경로 변경 (change directory) / 현재 커맨드라인 도구가 위치한 경로를 변경하는 역할 ex) 맥의 파인더나 윈도우즈의 탐색기에 비유 -> 폴더를 더블클릭해서 안으로 들어가거나 뒤로가기 버튼을 눌러 폴더를 빠져나오..

index.html 파일 작성 : 내용은 없지만 기본적인 웹사이트의 뼈대는 완성 웹사이트의 제목 : head 태그 안에 title 태그를 이용해서 작성 화면에 보이는 콘텐츠 : body 태그 안에 작성 styles.css 코드 : h1 태그의 텍스트 색상을 초록색으로 변경 & 기울임꼴 스타일인 italic 스타일을 적용하는 코드 link 태그 : css를 적용하기 위해서는 먼저 html 파일에서 css 파일을 불러와야 함 : 현재 html 파일과 외부 리소스 사이의 관계를 정의할 때 사용 css 파일을 불러오거나 웹브라우저 탭에 나오는 아이콘인 favicon 같은 것을 넣기 위해 가장 많이 사용함 주의할 점!!!! -> index.html 파일과 styles.css 파일이 동일한 디렉터리에 위치해야 함!..