코딩 부트캠프에서 React를 빠르게 실행하고 실험실에서 땀을 흘리는 동안 강사는 "눈을 가늘게 뜨고 보면 React는 Java와 매우 비슷합니다."라고 말했습니다.
처음에는 그냥 눈에 띄고 재미있는 문구였어요. ? 하지만 최근에는 개인 Google 지도 계산기 프로젝트를 진행하면서 React를 다시 방문하게 되었습니다. 며칠이 지나면서 이러한 유사점 중 일부가 드러나기 시작했습니다.
이러한 연관성을 자세히 살펴보고 Java의 기본 개념이 React에 대한 이해를 어떻게 밝힐 수 있는지 살펴보겠습니다. ?
Java 메인 클래스인 App.jsx(psvm)
Hook를 Java Getter 및 Setter로 사용하여 상태 관리
Java 클래스로서의 컨테이너
Java 메소드로서의 구성요소
React의 컴포넌트 반환
Java 메소드 매개변수로서의 Prop
값을 반환하는 Java 메소드로서의 콜백 함수
자바:
Java에서 메인 클래스는 프로그램의 진입점 역할을 하며 프로그램 실행을 시작합니다.
예를 들어, 다양한 클래스의 개체를 인스턴스화하고 해당 메서드를 호출할 수 있습니다.
public class Main {
public static void main(String[] args) {
Home home = new Home();
home.render();
About about = new About();
about.show();
}
}
반응:
마찬가지로 React 애플리케이션에서 App.jsx 파일은 기본 애플리케이션 흐름을 조정하여 비슷한 역할을 합니다.
Java의 기본 메소드가 여러 함수를 호출할 수 있는 것처럼 App.jsx는 애플리케이션의 라우팅 및 현재 상태를 기반으로 모든 구성 요소를 렌더링하는 역할을 담당합니다.
<Routes>
<Route exact path="/" element={<Home />} />
<Route path="/about" element={<About />} />
</Routes>
위 App.jsx의 React 예에서 return 문에 렌더링된 구성 요소는 Java에서 메서드를 호출하거나 객체를 초기화하는 프로세스를 반영합니다.
이 경우 컨테이너
자바:
Java에서는 사용자 이름과 같은 속성의 속성을 가져오고 설정하기 위한 변수 및 공용 getter/setter 메소드를 사용하여 속성을 관리합니다.
private String username;
public String getUsername() {
return this.username;
}
public void setUserData(String username) {
this.username = username;
}
반응:
React의 useState 후크는 Java가 getter 및 setter 메서드를 사용하여 객체 속성을 관리하는 방식과 유사하게 애플리케이션 상태를 처리합니다.
React의 useState 후크를 사용하면 클래스의 Java 인스턴스 변수와 마찬가지로 시간이 지남에 따라 변경될 수 있는 상태 변수를 선언할 수 있습니다.
const [username, setUsername] = useState("");
위의 예에서:
아래에는 웹 양식의 변경 사항을 감지하여 사용자 정보를 업데이트하고 사용자 이름 값을 사용자가 입력한 값으로 업데이트하는 함수 handlerInputChange가 있습니다.
public class Main {
public static void main(String[] args) {
Home home = new Home();
home.render();
About about = new About();
about.show();
}
}
구성 요소에서 사용자 이름을 참조할 때마다 해당 값에 액세스하기 위해 getter를 효과적으로 사용하는 것입니다. 예를 들어 내 웹페이지는 다음과 같이 사용자 이름을 렌더링할 수 있습니다.
<Routes>
<Route exact path="/" element={<Home />} />
<Route path="/about" element={<About />} />
</Routes>
자바:
Java에서 클래스는 관련 작업과 데이터를 함께 그룹화합니다. 이는 애플리케이션에서 정보가 흐르는 방식을 관리하는 데 도움이 됩니다.
이 예에서 Calculator 클래스는 계산을 처리하고 결과를 저장합니다.
private String username;
public String getUsername() {
return this.username;
}
public void setUserData(String username) {
this.username = username;
}
반응:
마찬가지로 React에서 컨테이너는 애플리케이션의 데이터를 구성 요소에 연결하는 중요한 역할을 합니다. API 호출에서 데이터를 가져오고 앱 상태를 관리하는 등의 작업을 처리합니다.
이 예에서는 계산기 컨테이너가 입력 값과 결과의 상태를 관리합니다.
const [username, setUsername] = useState("");
자바:
Java의 메서드는 사용자 입력 처리와 같은 특정 작업을 수행합니다. 이러한 메소드는 애플리케이션의 다양한 기능을 용이하게 하기 위해 필요에 따라 호출될 수 있습니다.
const handleInputChange = (event) => {
setUserName(event.target.value);
};
반응:
Java 메서드가 작고 집중적인 작업인 것처럼 React 구성 요소도 유사한 목적을 수행하며 사용자 인터페이스의 기본 구성 요소 역할을 합니다.
각 구성 요소는 특정 기능에 맞게 제작되었으며 애플리케이션 전체에서 재사용할 수 있습니다.
아래 ManualFilter 구성 요소는 사용자 필터링 옵션에만 중점을 둡니다. 사용자가 특정 카테고리를 선택할 수 있는 확인란을 제공합니다.
이 구성요소는 UserForm 컨테이너 페이지 내에서 호출될 수 있습니다.
<p>Welcome to our page {username}</p>
자바:
Java에서 메소드는 프로그램의 다른 부분이 출력을 생성하는 데 사용하는 값을 반환할 수 있습니다.
예를 들어, renderOutput 메소드는 사용자의 목표가 포함된 문자열을 반환하며, 이 문자열은 프로그램의 다른 곳에 표시될 수 있습니다.
public class Calculator {
private int result;
public void calculateSum(int a, int b) {
result = a + b;
}
public int getResult() {
return result;
}
}
반응:
React 구성 요소의 return 문은 사용자 인터페이스를 렌더링하는 데 중요합니다. React에서는 구성 요소에서 반환하는 내용에 따라 사용자가 화면에서 보는 내용이 결정됩니다.
이는 앞서 언급한 것처럼 프로그램의 다른 부분에서 처리하거나 표시할 데이터를 반환하는 Java의 메서드와 유사합니다.
이 예에서 UserGoal 구성 요소는 사용자의 목표를 표시하는 단락 요소를 반환합니다.
public class Main {
public static void main(String[] args) {
Home home = new Home();
home.render();
About about = new About();
about.show();
}
}
자바:
Java 메소드에 인수를 전달할 수 있으며, 여기서 인수는 호출 객체의 상태나 동작에 영향을 미칠 수 있습니다.
예를 들어 메시지를 매개변수로 사용하는 간단한 Java 메소드를 생각해 보세요. 수신되는 메시지는 콘솔에 표시되는 내용에 영향을 미칩니다.
<Routes>
<Route exact path="/" element={<Home />} />
<Route path="/about" element={<About />} />
</Routes>
반응:
React에서 구성요소는 Java 메소드의 매개변수와 유사한 props를 받을 수 있습니다. React 구성 요소는 props를 사용하여 내용과 기능을 결정합니다.
Properties는 구성요소의 작동 방식과 표시되는 데이터를 제어합니다.
MessageDisplay 하위 구성 요소에 메시지를 전달하는 WelcomePage라는 상위 구성 요소가 있다고 가정해 보겠습니다.
즉, 메시지 표시를 메시지가 표시되는 WelcomePage 랜딩 페이지의 섹션으로 상상해 보세요.
상위 구성 요소에서 메시지를 정의하고 이를 MessageDisplay 구성 요소에 prop으로 전달할 수 있습니다.
private String username;
public String getUsername() {
return this.username;
}
public void setUserData(String username) {
this.username = username;
}
MessageDisplay 구성 요소는 이 소품을 수신하여 렌더링합니다.
const [username, setUsername] = useState("");
자바:
Java에서는 특정 작업을 수행하고 호출자에게 값을 반환하는 메서드가 클래스 내에 있는 경우가 많습니다. 예를 들어 두 숫자 사이의 차이를 계산하는 메서드가 포함된 Calculator라는 클래스가 있을 수 있습니다.
const handleInputChange = (event) => {
setUserName(event.target.value);
};
^다른 클래스에서는 Calculator 클래스의 인스턴스를 생성하고 해당 메서드를 호출합니다.
반응:
React는 비슷한 개념을 따르지만 구성 요소 간의 관계에 중점을 둡니다.
하위 구성 요소가 포함된 상위 구성 요소가 있는 경우 콜백 함수는 이들 간의 통신을 촉진하는 데 도움이 됩니다. (기억하세요: 상위는 다른 구성 요소를 보유하는 기본 컨테이너입니다. 메시지 상자의 하위 구성 요소가 있는 상위 "랜딩 페이지"의 이전 예와 유사합니다.)
예를 들어 계산된 데이터를 상위 구성 요소로 다시 보내야 하는 ChildComponent가 있다고 가정해 보겠습니다.
아래에서는 부모로부터 자식에게 prop으로 HandleCalculationResult 함수를 전달합니다.
이 함수는 콜백처럼 작동합니다.
<p>Welcome to our page {username}</p>
아래에서 onCalculate가 상위 구성 요소의 ChildComponent에서 수신된 콜백 함수임을 확인할 수 있습니다.
ChildComponent의 버튼을 클릭하면 계산을 수행하고 onCalculate를 사용하여 결과를 상위 요소로 다시 보냅니다. 이는 Java 메소드가 호출자에게 값을 반환하는 방식을 모방합니다.
public class Calculator {
private int result;
public void calculateSum(int a, int b) {
result = a + b;
}
public int getResult() {
return result;
}
}
이런 방식으로 부모는 전반적인 애플리케이션 상태와 동작을 관리하고, 자식은 특정 작업(이 경우 계산)에 집중합니다.
위 내용은 자바 렌즈를 통해 반응을 보는 것의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
