재밌는 Coding

1. 시험환경

- Visual Studio Code

- node v14.17.0

- npm 6.14.13

2. 목적

- 단계별 학습을 통해서 ReactJS 사용법을 익힌다.

- 다양한 방식으로 function 컴포넌트를 정의하고 사용하는 방법을 학습한다.

3. 적용

① 테이블 전체 영역을 function 컴포넌트로 정의한다.

② 정의한 function 컴포넌트를 JSX 영역에서 마치 HTML 폼 요소(Element) 형태로 출력한다.

    - JSX HTML 영역을 function 컴포넌트로 정의하여 ReactDOM.render()를 간소화하였다.

4. 결과

※ 내용이 도움 되셨다면 광고 클릭 한번 부탁드립니다.

1. 시험환경

- Visual Studio Code

- node v14.17.0

- npm 6.14.13

2. 목적

- 단계별 학습을 통해서 ReactJS 사용법을 익힌다.

- 다양한 방식으로 function 컴포넌트를 정의하고 사용하는 방법을 학습한다.

3. 적용

① 다양한 방식으로 function 컴포넌트를 정의한다.

    - function component의 이름은 반드시 대문자로 시작해야 한다.

    - 일반적인 방식으로 "function 함수명() {}" 형식에 의해 function 컴포넌트를 정의한다.

    - 축약 방식으로 "const 함수명=() => {}" 형식에 의해 function 컴포넌트를 정의한다.

② 정의한 function 컴포넌트는 JSX 문법에서 "<함수명/>"으로 호출하여 사용한다.

4. 결과

※ 내용이 도움 되셨다면 광고 클릭 한번 부탁드립니다.

1. 시험환경

- Visual Studio Code

- node v14.17.0

- npm 6.14.13

2. 목적

- 단계별 학습을 통해서 ReactJS 사용법을 익힌다.

- JSX 문법에서 변수 선언 및 사용하는 방법에 대하여 학습한다.

3. 적용

① let 키워드를 이용하여 변수를 선언한다.

    - 변수에 단일값을 적용할 수 있다.

    - 변수에 json 형태의 값을 적용할 수 있다.

② {} 기호를 이용하여 변수에 저장된 값을 출력한다.

    - {변수}

4. 결과

※ 내용이 도움 되셨다면 광고 클릭 한번 부탁드립니다.

1. 시험환경

- Visual Studio Code

- node v14.17.0

- npm 6.14.13

2. 목적

- 단계별 학습을 통해서 ReactJS 사용법을 익힌다.

- JSX 문법에 bootStrap을 적용하는 방법을 알아보자.

3. 적용

① bootstrap css 링크를 추가한다.

    - URL : https://getbootstrap.com/docs/4.4/getting-started/introduction/

② JSX 태그에서 css를 적용하기 위해서는 class가 아닌 className을 사용해야 한다.

4. 결과

    - css 스타일이 적용된 결과를 확인한다.

※ 내용이 도움 되셨다면 광고 클릭 한번 부탁드립니다.

1. 시험환경

- Visual Studio Code

- node v14.17.0

- npm 6.14.13

2. 목적

- 단계별 학습을 통해서 ReactJS 사용법을 익힌다.

- JSX(Java Script eXtention) 기본 사용법을 학습한다.

3. 적용

① JSX를 사용하기 위해 CDN 방식으로 babel 라이브러리를 추가한다.

    - URL : https://babeljs.io/

② JSX를 사용하기 위해 <script type= "text/babel">로 변경한다.

③ React.createElement() 대신 HTML 코드를 직접 입력하여 목적지 태그에 Element를 렌더링한다.

    - ReactJS의 API를 사용하는 것보다 익숙한 HTML 문법을 사용하는 것이 보다 좋은 편의성을 제공한다.

4. 결과

- JSX를 이용한 결과를 확인한다.

※ 내용이 도움 되셨다면 광고 클릭 한번 부탁드립니다.

1. 시험환경

- Visual Studio Code

- node v14.17.0

- npm 6.14.13

2. 목적

- 단계별 학습을 통해서 ReactJS 사용법을 익힌다.

- React.createElement()를 중첩사용하는 방법을 알아보자.

3. 적용

① React.createElement()를 이용하여 각각 다른 속성값을 갖는 문자열을 h1 태그로 생성한다.

② React.createElement()를 중첩 사용하고, 속성값을 갖는 태그를 생성한다.

4. 결과

    - React.createElement()를 중첩 사용 결과를 확인한다.

※ 내용이 도움 되셨다면 광고 클릭 한번 부탁드립니다.

1. 시험환경

- Visual Studio Code

- node v14.17.0

- npm 6.14.13

2. 목적

- 단계별 학습을 통해서 ReactJS 사용법을 익힌다.

- React.createElement()에서 속성을 설정하는 두번째 파라미터 사용법을 학습한다.

3. 적용

① React.createElement()를 이용하여 속성 설정, 문자열을 갖는 h1 태그를 생성한다.

② ReatDOM.render()를 이용하여 ①에서 생성한 태그를 "div1" 영역에 출력한다.

4. 결과

    - style이 적용된 문자열이 출력되었다.

※ 내용이 도움 되셨다면 광고 클릭 한번 부탁드립니다.

1. 시험환경

- Visual Studio Code

- node v14.17.0

- npm 6.14.13

2. 목적

- 단계별 학습을 통해서 ReactJS 사용법을 익힌다.

- CDN 방식으로 HTML 문서에 react.js 라이브러리를 추가하는 방법을 학습한다.

- createElement()를 이용하여 태그를 생성하는 방법을 알아보자.

- render()을 이용하여 특정 ID를 갖는 태그에 간단한 문자열을 출력한다.

3. 적용

① html 파일에 reactjs 라이브러리를 CDN 방식으로 추가한다.

    - https://ko.reactjs.org/docs/cdn-links.html

② "div1"이라는 id를 갖는 div 태그 영역이 출력을 위한 목적지 태그이다.

③ createElement()를 이용하여 "Hello World" 문자열을 h1 태그로 생성하고, id가 "div1"인 목적지에 출력한다.

④ 전체 완성 코드는 다음과 같으며, 프로그램을 실행한다.

4. 결과

    - HTML 파일을 더블클릭하여 실행한다.

    - "Hello World" 문자열을 갖는 h1 태그가 생성된 것이 "div1" 위치에 출력되 것을 확인할 수 있다.

※ 내용이 도움 되셨다면 광고 클릭 한번 부탁드립니다.