재밌는 Coding

1. 시험환경

- Visual Studio Code

- node v14.17.0

- npm 6.14.13

2. 목적

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

- class 컴포넌트의 내장 객체 state 사용법을 학습한다.

- click 이벤트 처리방법을 학습한다.

3. 적용

① state 객체를 정의한다.

② this.setState() 함수를 이용해서 state 객체의 참조값을 변경한다.

③ 버튼 클릭시 state 참조값이 교대로 변경되도록 function 컴포넌트를 호출한다.

4. 결과

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

1. 시험환경

- Visual Studio Code

- node v14.17.0

- npm 6.14.13

2. 목적

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

- 기존 function 컴포넌트를 class 컴포넌트로 대체하여 동일한 동작이 되는지 확인한다.

3. 적용

① 기존 function 컴포넌트를 주석처리한다.

② class 컴포넌트로 대체하고, 문법 구조를 학습한다.

    - class 컴포넌트에서는 반드시 render(){} 안에 JSX 문법을 사용해야 한다.

4. 결과

- function 컴포넌트를 class 컴포넌트로 대체해도 동일한 결과가 나타난다.

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

1. 시험환경

- Visual Studio Code

- node v14.17.0

- npm 6.14.13

2. 목적

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

- 3항 연산자를 활용하여 front-end 화면이 동적으로 배치되는 방법론을 학습한다.

3. 적용

① function 컴포넌트 호출시 매개변수 및 할당값을 전달한다.

② 3항 연산자를 활용하여 전달 받은 매개변수 값에 의해 function 컴포넌트를 배치한다.

4. 결과

- function 컴포넌트 호출시, 매개변수 전달값에 따라 다른 결과가 나타나는 것을 확인한다.

- 추후, 사용자 조작에 따라 동적으로 변화하는 웹 페이지를 만들 수 있다.

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

1. 시험환경

- Visual Studio Code

- node v14.17.0

- npm 6.14.13

2. 목적

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

- function 컴포넌트 호출 시 매개변수 전달 방법을 알아보자.

- function 컴포넌트에서 전달받은 매개변수를 참조하는 방법을 알아보자.

3. 적용

① FuncTitle이라는 function 컴포넌트 호출과 동시에 subject, inform 매개변수를 전달한다.

② FuncTitle이라는 function 컴포넌트를 정의하고, props 매개변수를 선언하였다.

    - 전달받은 매개변수는 "props.키" 형태로 값을 참조할 수 있다.

    - props.subject : FuncTitle 호출과 함께 subject 변수로 전달한 값을 참조한다.

    - props.inform : FuncTitle 호출과 함께 inform 변수로 전달한 값을 참조한다.

4. 결과

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

1. 시험환경

- Visual Studio Code

- node v14.17.0

- npm 6.14.13

2. 목적

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

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

- function 컴포넌트를 세분화해서 코드를 구조화하는 방법을 학습한다.

3. 적용

① 테이블 각각의 행(Row)을 function 컴포넌트 단위로 구성한다.

②  function 컴포넌트로 구성한 각각의 행(Row)을 Funcbody 컴포넌트에서 호출한다.

4. 결과

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

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. 결과

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