1. Component란? React에서 컴포넌트는 프로그램을 이루는 최소한의 단위 자바 스크립트에서의 함수와 유사 컴포넌트의 이름은 대문자로 시작되도록 함 컴포넌트를 통해 UI를 여러 개의 조각으로 나눈 뒤, 재사용이 가능하도록 함 각각의 조각들을 개별적으로 관리할 수 있도록 함 2. Component의 구분 2.1. 함수 컴포넌트 - function으로 정의 - return 문에 JSX 코드를 반환 함수 컴포넌트를 작성하는 방법은 function 사용 유무에 따라 다시 2가지로 나뉜다. 1) function 함수 사용 밑줄 친 부분은 함수 컴포넌트로, 해당 함수를 따라가서 살펴보면 function App() { return ( Hello ); } 이렇게 function으로 App 함수를 정의하고 있으..

1. Props Properties의 줄임말 속성을 나타내는 데이터 함수의 매개변수와 같이 컴포넌트끼리 값을 전달 읽기 전용으로, 컴포넌트 내부에서 값 수정이 불가 가장 중요한 마지막 특징을 살펴보자. function sum(a, b) { return a + b; } 위와 같은 간단한 함수를 보면 입력되는 값이 컴포넌트 내부에서는 바뀌지 않고 있다. 이는 즉, 더한 값이 리턴되지만, a와 b 자체의 값은 변하지 않는다는 것을 의미한다. 이러한 함수를 pure function 이라고 부른다. function withdraw(account, amount) { account.total -= amount; } 반대로 여기 이 함수를 보면 amount의 값이 함수 내부에서 바뀐다는 것을 볼 수 있다. amount..

JSX란? React에서 component는 꼭 저런 형식으로 작성이 되어야 하는데, 이 때 Javascript와 HTML이 합쳐진 문법 일종의 자바스크립트의 확장된 문법 JSX는 React로 개발할 때 주로 사용이 되며, 공식 자바스크립트의 문법이라고 할 수는 없음 JSX의 작성 방법 Javascript 언어 사용 JSX 내부에서 Javascript 언어를 사용하기 위해서는 { }로 코드를 감싸주어야 한다. div로 요소 묶기 하나의 컴포넌트 안에 여러 개의 요소가 존재하면 div 태그로 묶어주어야 한다. // 잘못된 코드 function App(){ return( Hello bad code ) } // 올바른 코드 function App(){ return( Hello good code ) } 조건 연..

앞서 작성한 프로그램 생성 법과 유사한 내용이지만 너무 간단하게 적었나 싶어 조금 더 자세하게 !! 과정을 한 번 더 작성한다. 1. create-react-app ?! - React를 만든 페이스북에서 제공하는 CLI 도구 (CLI : 커맨드 라인 인터페이스) - React를 사용해 프로젝트를 개발하고자 할 때, 아무것도 없는 상태에서 시작하는 것이 아닌 기본적인 틀을 잡아줌 2. 프로젝트 생성 npx create-react-app [ 프로젝트 이름 ] cmd에서 폴더를 만들 위치로 이동한 뒤,, 위에 보이는 명령어를 한 줄만 작성하면 끝이다! 그런 다음 기다리면 요렇게 진행 상황이 보여지고.. 조금만 더 기다리면..! 짠~~! 이렇게 프로젝트의 틀이 만들어진 것이다!! 이렇게 간편하게 만들어지다니 놀..

1. ReactJS 프로그램 생성하는 법 cmd 창에서 파일을 생성하려고 하는 저장소로 이동 후 하단 명령어 입력 npx create-react-app [ 프로젝트 이름 ] VSCode 에서는 터미널에서 npm start 명령어를 통해 프로그램을 실행 App.js import { useState, useEffect } from "react"; function App() { const [counter, setValue] = useState(0); const [keyword, setKeyword] = useState(""); const onClick = () => setValue((prev) => prev + 1); const onChange = (event) => setKeyword(event.target..

1. String 문자열 대문자, 소문자 변환 String myString = "aBcDe"; System.out.println(myString.toUpperCase()); // ABCDE 출력 System.out.println(myString.toLowerCase()); // abcde 출력 System.out.println(myString); // aBcDe 출력 Java에서는 문자열을 대문자로, 혹은 소문자로 변경하는 내장 함수를 제공하고 있다. toUpperCase() -> 대문자형으로 변환 toLowerCase() -> 소문자형으로 변환 위 코드에서 두 메소드는 myString의 값 자체를 변경하는 것이 아닌 새로운 문자열을 리턴하는 것이기 때문에 myString의 값 자체는 변하지 않는다. 2..

자바에는 클래스 변수, 인스턴스 변수, 지역 변수가 존재하며, 변수의 종류는 변수가 선언된 위치에 따라 결정된다. static이 붙어있는 것은 클래스 변수, 붙어있지 않은 것은 인스턴스 변수이다. 인스턴스 변수는 각각 다른 값을 가질 수 있다는 특징을 가지고 있으나, 클래스 변수는 모든 인스턴스가 같은 값을 가지게 된다. 지역 변수는 메서드가 실행되는 동안 사용하다가 끝나면 소멸되어 사용할 수 없게 되는 변수이다. 기본형 (Primitive Type) 참조형 (Reference Type) int, boolean, char, double 등 Person, String, int[] 등 클래스 기반 자료형 변수가 값 자체를 보관한다 실제 값은 메모리 어딘가에 저장, 변수는 그 영역(값)을 ‘가리킨다’. ☆ n..

https://nomadcoders.co/react-for-beginners ReactJS로 영화 웹 서비스 만들기 – 노마드 코더 Nomad Coders React for Beginners nomadcoders.co

modifier 함수를 가지고 state(setCounter)를 변경할 때 react에 의해 컴포넌트(function)가 재생성됨 (새로운 값을 가지고 리렌더링) 코드가 실행되는 과정 : 1. 버튼을 누르면 counter가 1이 됨 2. console.log(1), Total clicks: 1이 됨 3. 이는 컴포넌트 자체가 재생성 된 것임 4. 데이터(setCounter)가 바뀔때마다 컴포넌트를 리렌더링하고 UI를 refresh하는 것 바닐라 js를 대체 HTML요소를 생성하거나 찾을 필요 X 이벤트 리스너를 더해줄 필요 X UI 업데이트 필요 X -> return 안에서 HTML을 바로 생성해버렸고, 거기에서 바로 이벤트 리스너를 더해줬고, UI를 업데이트 하면 자동으로 리렌더링 됨 state를 바꾸..

어플리케이션 시작 시 counter = 0 26번째 줄 render함수 실행 render 함수는 Container 컴포넌트를 root에 담아줌 어플리케이션이 막 시작되었을 때의 Container은 Total click을 가지고 있으며, counter과 연결되어있음 (20-22줄) onClick 이벤트 리스너를 통해 버튼 클릭 시 {}안의 countUp 함수가 호출 countUp함수는 counter을 증가시키고 다시 render을 호출 render 함수 호출되면 같은 과정 반복 (3. Container을 root에 넣기) 다시 반복하면 이번 Container 컴포넌트는 업데이트 된 counter을 가지고 있음 근데 이 과정은 복잡하다는 단점이 있긴 하다 :( https://nomadcoders.co/rea..