THE VALUE

[ State ] - useState Hook 컴포넌트의 내부에서 변경 가능한 데이터를 관리할 때 사용 값을 저장하거나 변경할 수 있는 객체로 보통 이벤트와 함께 사용되는데 예제를 보면 다음과 같다. React.useState는 배열 형태의 객체를 반환 첫번째 요소는 변경될 값을 관리할 변수 - counter 두번째 요소는 이벤트 처리를 위한 함수 - setCounter counter 이름의 변수에 0으로 초기화한 데이터를 저장하고 setCounter 이름의 함수를 통해 값을 변경하면서 화면에 값을 리렌더링(다시 그리기) 하는 과정을 거침 특정 값에 대한 state 관리를 통해 화면에 변경되는 이벤트를 처리 여러개의 컴포넌트를 결합하여 화면에 리랜더링하는 예제 {} 안의 삼항연산자를 통해 셀렉트박스에서 ..

[ JSX ] Javascript 언어에 XML을 추가하여 확장된 문법으로 리액트 프로젝트를 개발할 때 자주 사용되는 문법 Babel이란 도구를 이용하여 일반적인 자바스크립트 형태로 변환된 후 브라우저에서 실행이 됨 일반적인 자바스크립트 문법과 HTML 문법이 혼용되어 사용됨 https://babeljs.io/ Babel · The compiler for next generation JavaScript The compiler for next generation JavaScript babeljs.io JSX 문법으로 작성된 코드를 일반 자바스크립트 형태로 변환해볼 수도 있으며, 라이브러리 문서를 확인할 수 있는 사이트 리액트 문법을 통해 컴포넌트를 생성하여 화면에 렌더링 하는 방식에서 JSX 문법을 통해 ..

리액트 클래스와 함수 사용에 대한 설명 및 샘플 예제. [ 클래스 사용 ] [ 함수 사용 ]

[ yarn start 오류 시 ] 리액트 프로젝트 폴더 내에서 yarn start 명령어를 이용하여 프로그램 실행 시 오류가 발생하는 경우 1. 프로젝트 내부에 있는 node_modules 폴더, yarn.lock 파일을 삭제 2. npm cache clear --force 명령어 실행하여 메모리 해제 3. npm install 명령어 실행하여 package.json에 등록된 프로그램 재설치 4. yarn start 다시 시도 [ react - 함수 호출 / 스타일 적용 ] 함수를 생성하여 리턴 결과를 화면에 출력 테스트. 스타일도 적용해보고 변수 선언 후 변수 값도 삽입해봄.