📌. 컴포넌트 앞선 포스트에서 컴포넌트(component)는 리액트 프로젝트에서 특정 부분이 어떻게 생길지를 결정하는 선언체라고 배웠습니다. 리액트의 컴포넌트는 함수형 컴포넌트와 클래스형 컴포넌트로 두 가지로 선언될 수 있습니다. 클래스형 컴포넌트와 함수형 컴포넌트를 비교하며 컴포넌트를 생성해보겠습니다. 또한 컴포넌트에서 사용하거나 렌더링 하는 데이터를 담는 props와 state의 차이점과 선언 방식을 배우겠습니다. 📌 I. 클래스형 컴포넌트 📚 1. 클래스형 컴포넌트 컴포넌트를 선언하는 방식은 클래스 컴포넌트와 함수 컴포넌트로 나뉩니다. 클래스형 컴포넌트와 함수 컴포넌트는 state 기능 및 라이프 사이클 기능, 임의 메서드 정의 등에서 차이가 납니다. 각 방법으로 작성된 코드를 보면서 차이점을 비교..

📌 캡슐화와 정보 은닉 알약은 각 기능을 하는 성분들을 하나의 캡슐에 묶어 사용자가 먹거나 관리하는 것을 편하게 합니다. 또한 알약은 그 기능을 수행하기 위한 최소한의 부분 즉 외형만 공개하고 그 외의 것은 숨깁니다. 이를 통해 환자들은 알약을 쉽게 섭취하고 약으로서 편히 사용할 수 있는 것 입니다. 자바 객체는 데이터를 가지고 있는 "멤버 필드"와 그 기능을 하는 "메서드"로 기능들이 묶여있습니다. 때문에 개발자나 사용자가 객체를 유지 및 보수하기 좋습니다. 또한 객체의 멤버 필드나 메서드 중 필요한 부분만 접근하도록 하여 부적절한 접근을 막을 수 있습니다. 📌 I. 캡슐화와 정보 은닉 📚 1. 캡슐화(Encapsulation) "데이터"와 관련된 "메서드"들을 하나의 객체로 묶는 것을 의미 내부를 보..

📌. 클래스의 멤버 📌 I. 메서드 처리 방식 📚 1. 메서드 호출 메커니즘 각 인수의 표현식은 메서드가 호출되기 전에 먼저 계산됩니다. 계산된 결과값은 임시 변수에 저장됩니다. 계산된 각 인수값은 해당되는 형식 매개변수에 위치 순서대로 복사됩니다. 매개변수의 타입으로 인수를 타입변환(캐스팅)할 수 있습니다. 메서드 본체의 문장은 마지막 문장이나 return 문이 나오기 전까지 수행됩니다. return 문의 표현식이 계산됩니다. 계산의 결과값은 마찬가지로 임시변수에 저장되고 임시 변수의 값을 호출측으로 반환합니다. 메서드 호출측은 메서드 호출문 자리에 return 문으로 넘겨받은 결과값을 대입합니다. 📚 2. 메서드 인자 전달 방식 인수가 매개변수로 전달되는 방식에 대한 관점은 두 가지가 있습니다. 인수..

📌. 클래스와 객체 프로그래밍을 하다 보면 객체 지향 방식과 절차 지향 방식 등 다양한 프로그래밍 개발 방식에 대해 많이 들어볼 수 있습니다. 또한 반복되는 변수들과 함수들을 안전하고 편리하게 관리하는 방법을 찾아보게 됩니다. 오늘은 객체 지향 언어와 절차 지향 언어의 차이점과 객체 지향 언어의 특징을 배워보겠습니다. 객체 지향 언어의 대표적 예시인 자바의 클래스와 객체에 대해 알아보고, 객체 지향 언어로써 자반의 특징을 알아보겠습니다. 마지막으로 자바 클래스의 기본 구조를 알아봅니다. 📌 I. 객체 지향 언어의 특징 📚 1. 절차 지향 언어 vs 객체 지향 언어 (1) 절차 지향 언어 (Procedural Programming) 커피를 내린다고 가정을 해봅시다. 이 과정을 서술하면 등으로 서술될 수 있..

📌 JSX 리액트는 HTML과 비슷한 형식의 코드 작성 방식인 JSX를 통해 코드를 작성합니다. 오늘은 JSX의 기능과 규칙들을 배워보도록 하겠습니다. 또한 코드의 가독성과 작성을 돕는 ESLint와 Prettier도 다뤄보도록 하겠습니다. 📌 I. 코드 이해하기 src/App.js 파일을 열어보면 다음과 같은 코드가 있을 것입니다. import logo from './logo.svg'; import './App.css'; function App() { return ( Edit src/App.js and save to reload. Learn React ); } export default App; 위의 코드를 하나씩 이해해봅시다. 📚 1. import 구문 import logo from './logo.s..

본격적으로 React에 대해서 배우기 전에 Visual Studio Code를 통해 프로젝트를 생성하는 방법에 대해 알아보겠습니다. 프로젝트 생성 시 만들어진 프로젝트의 폴더와 파일들이 의미하는 바도 함께 배워보겠습니다. I. 프로젝트 생성 🛠 1. 프로젝트 작업에 사용할 폴더를 만듭니다. 폴더를 Shift + 우클릭 후 PowerShell 터미널 열기를 클릭합니다. 🛠 2. yarn create react-app 을 입력합니다 🧨 Warning 1) 윈도우의 경우, 허가되지 않은 스크립트라는 말이 나오는 경우 윈도우 검색창에 PowerShell을 검색 후, PowerShell 아이콘을 우클릭 하여 관리자 권한으로 실행 Set-ExecutionPolicy Unrestricted 입력 후 엔터 y를 눌러서..