1. Hooks의 개념과 useState, useEffect 1) Hook이란? hook이란 함수 컴포넌트에 클래스 컴포넌트 기능(state, lifecycle)을 지원하기 위해 나온 것 리액트의 state와 생명주기 기능의 갈고리를 걸어 원하는 시점에 정해진 함수를 실행되도록 만든 것 → Hook use---라고 명명해서 사용 2) useState state를 사용하기 위한 hook 🔎 useState 사용법 버튼을 클릭하면 카운트를 증가하고 카운트를 보여주는 컴포넌트 버튼 클릭 시 카운트가 증가하지만 재렌더링이 일어나지 않아 증가되는 값을 보여줄 수 없음 버튼을 클릭하면 setCount 함수를 호출해 카운트가 증가하고 컴포넌트가 재렌더링되면서 화면에 새로운 카운트 값을 보여줌 🔎 useState 주의..

1. State와 Lifecycle의 정의 🔎 State란? 리액트 컴포넌트의 상태, 리액트 컴포넌트의 변경 가능한 데이터를 의미 state는 개발자가 정의 렌더링이나 데이터 흐름에 사용되는 것만 state에 포함 state가 변경될 경우 컴포넌트가 재렌더링되기 때문에 성능 저하 렌더링이나 데이터 흐름과 상관없는 값은 인스턴스 필드로 정의 state는 자바스크립트 객체이다 클래스 컴포넌트는 constructor 함수 가지고 있음(= 생성자), 클래스가 생성되면 실행됨 this.state 부분이 현재 컴포넌트의 state를 정의하는 부분 함수 컴포넌트에서는 useState라는 hook을 사용해서 정의함 state는 직접 수정할 수 없다 state는 렌더링과 관련이 있기 때문에 직접 변경하기보단 setter..

1. Components와 Props의 정의 📌 Components 리액트는 컴포넌트 기반, 모든 페이지가 컴포넌트로 구성 작은 컴포넌트들을 모아서 하나의 컴포넌트를 구성하고 이러한 컴포넌트들이 모여서 전체 페이지를 구성 하나의 컴포넌트를 반복적으로 사용함으로써 전체 코드 양을 줄이고 개발 시간 단축과 유지보수가 용이 🔎 component의 역할 어떠한 속성들을 입력(Props) 받아서 리액트 element를 생성하여 리턴 📌 Props(Property) 리액트 컴포넌트의 입력, 컴포넌트의 속성을 의미 props는 글자나 색깔 등의 속성 등 컴포넌트에게 전달할 다양한 정보를 담고 있는 자바스크립트 객체 2. Props의 특징 및 사용법 📌 Props의 특징 🔎 Read-only 값을 변경할 수 없음 🔎 ..

1. Elements의 정의와 생김새 📌 Elements란? 리액트 앱을 구성하는 가장 작은 블록들 화면에서 보이는 것들을 기술 🔎 React element와 DOM element의 차이 실제 브라우저의 DOM에 존재하는 element가 DOM element 리액트의 virtual DOM에 존재하는 element가 리액트 element 즉 리액트 element는 DOM element의 가상 표현 DOM element는 리액트 element에 비해 많은 정보를 가지고 있어 상대적으로 크고 무겁다 🔎 React element const element = Hello; React.createElement 함수 호출 → 자바스크립트 객체 생성 = 리액트 element 리액트는 이 element를 이용해 실제 화..

1. JSX의 정의와 역할 📌 JSX란? A syntax extension to JavaScript → 자바스크립트의 확장 문법 JavaScript + XML/HTML을 합쳐 확장 🔎 JSX 예제코드 JSX 코드는 자바 스크립트와 HTML 코드가 결합되어 있다 const element = Hello; 📌 JSX의 역할 내부적으로 XML/HTML 코드를 자바스크립트로 변환 → React.createElement 함수 호출 → 자바스크립트 객체 생성 리액트는 생성된 객체를 읽어서 DOM을 만드는 데 사용하고 최신 상태로 유지 리액트에서 JSX는 필수는 아니지만 코드가 간결하고 가독성이 높아지기 때문에 사용하는 것을 권장 2. JSX의 장점 및 사용법 📌 JSX의 장점 간결한 코드 가독성 향상 → 버그 발견 ..

1. 직접 리액트 연동하기 📃 index.html 블로그에 오신 여러분을 환영합니다 🔎 link 태그 현재 html 파일과 외부 리소스 사이의 관계를 정의할 때 사용 css 파일을 불러오거나 favicon 같은 것을 넣기 위해 사용 🔎 React 추가하기 리액트를 사용하기 위해 DOM 컨테이너를 추가 스크립트 태그를 이용해 리액트 js파일과 리액트 컴포넌트를 가져오기 📃 style.css h1{ color: teal; font-style: italic; } 📃 MyButton.js 리액트 컴포넌트 만들기 function MyButton(props) { const [isClicked, setIsClicked] = React.useState(false); return React.createElement( '..

1. 리액트는 무엇인가? 📌 리액트란? 리액트란 사용자 인터페이스(User Interface, UI)를 만들기 위한 자바스크립트 라이브러리 🔎 사용자 인터페이스 사용자와 컴퓨터 프로그램이 서로 상호작용을 하기 위해 서로 간에 입력과 출력을 제어해 주는 것 버튼, 텍스트 입력창 등 🔎 라이브러리 특정 프로그래밍 언어에서 자주 사용되는 기능들을 정리해 모아 놓은 것 🔎 프레임워크와 라이브러리 차이 흐름의 제어 권한이 누구에게 있는지 차이, 제어 권한이 개발자에게 있으면 라이브러리이고 프레임워크는 제어 권한이 자신에게 있음 📌 SPA(Single Page Application) 하나의 페이지만 존재하는 웹사이트 또는 웹 애플리케이션 하나의 HTML 틀을 만들어 놓고 사용자가 특정 페이지를 요청할 때 안에 해당..

HTTP 프로토콜은 클라이언트에서 request를 보내고 서버에서 response를 받으면서 연결이 끊긴다. 화면을 변경할 필요가 있으면 다시 request 하고 response를 받아야 한다. 매번 서버로부터 새로운 HTML을 전송받아 웹페이지를 전체를 렌더링 하게 되는 것. 변경할 필요가 없는 부분까지 매번 새로 렌더링을 하다보니 불필요한 데이터 통신이 발생하고 이로 인해 순간적인 화면 깜빡임이 생긴다. 또한 클라이언트와 서버가 동기방식으로 동작하기 때문에 서버로 부터 응답이 오기까지 다음 작업은 중단된다.(블로킹) AJAX를 이용해 비동기로 통신하게 되면 json이나 xml형태로 데이터를 받아 일부만 갱신하기 때문에 깜빡임 없이 부드러운 화면 전환과 자원, 시간을 아낄 수 있다. 🗂️ ajax(As..