이번 시간에는 리액트의 중요한 부분 중에 하나인 state에 대해서 알아보겠습니다.


     state    

- 유동적인 데이터

- JSX 내부에 {this.state.stateName}

- 초기값 설정이 필수 ,생성자(constructor)에서 this.state = { } 으로 설정

- 값을 수정할 때에는 this.setState({...})

  랜더링 된 다음엔 this.state = 절대 사용하지 말 것 
  (이유는 랜더링 된 다음에 이 구문 사용을 사용하면
   바뀐 부분만 업데이트 하겠다는 것을 무시하는 것이고, 성능에도 안 좋습니다.)

 

바로 실습을 하면서, Counter 라는 기능을 만들어 보겠습니다.

처음에는 지금까지 한 것을 복습한다는 생각으로 "React 왕초보의 count"만 출력해 보겠습니다. 

지금까지와 마찬가지로 캡쳐화면은 모두 클릭하시면 원본 크기로 확인이 가능합니다.


 모두 잘 출력되셨죠? 이번에는 counter의 주요 기능인 숫자와 버튼을 만들어 보도록 하겠습니다.



 분명히 맞게 코드를 입력한 것 같은데 흰색 화면에 아무 것도 출력이 되지 않습니다.

그 이유는 화면을 위로 올려서 처음에 배웠던 내용을 보시면 답이 있습니다.

초기값 설정을 해주지 않은 이유 때문입니다. 

그럼 초기값을 설정을 해보도록 하겠습니다.




빨간 네모 박스 안에 초기값을 설정해주니 위와 같이 숫자0 과 버튼이 생겼습니다.

constructor의 메소드는 props 입니다.

super(props)를 먼저 실행해줘야 이 메소드 안에서 this.state라던지 props라던지 접근 할 수 있습니다.



이제 버튼이 클릭 될 때 실행될 메소드를 만들어 보겠습니다.

아래 빨간 네모창과 빨간 줄 부분을 추가해 보겠습니다.



코드를 잘 작성한 후에 아래 버튼을 클릭해봤는데 아무 반응이 없습니다. 

그래서 개발자 도구를 통해서 이유가 뭔지 살펴보겠습니다.

개발자 도구 단축키를 클릭해봤는데 안되서 저는 수동으로 직접 선택하였습니다.

아래 화면을 참고하세요. 




개발자 도구가 열여서 아래 press me 버튼을 클릭할 때마다 에러가 늘어나는 것을 확인할 수 있었습니다.

아까 만든 this.setState 부분에서 this 가 어떤 부분인지 알 수 없어서 발생하는 에러입니다.



 


아래 빨간 네모 화면을 추가해 주고 버튼을 다시 클릭해보면 

아래 화면과 같이 숫자가 올라가는 것을 확인할 수 있습니다.

드디어 간단하지만 Counter 기능이 구현되는 웹을 만드는데 성공하였습니다.








아까 확인했던 개발자 도구를 열어서 추가로 에러가 발생하는지 확인해보도록 하겠습니다.

그 전에 발생한 에러만 출력되고 버튼을 계속 눌러도 에러가 발생하지 않는 것을 확인하였습니다.





약간은 지루했던 문법까지 배우면서 4번째 시간만에 첫번째 웹을 만들어 봤습니다.

간단하지만 에러 없이 구현해봤다는 것에 의미를 부여하고, 

앞으로는 조금 더 그럴듯한 웹을 만들기 위해서 더 공부해도록 하겠습니다.

고맙습니다.

'React > 왕초보 도전' 카테고리의 다른 글

6. 간단한 영화 웹 서비스 만들기 1  (0) 2017.12.19
5. component mapping , 간단한 주소록 구현  (0) 2017.12.19
3. props 소개  (0) 2017.12.19
2. ES6 클래스, JSX 소개  (0) 2017.12.19
1. React 소개  (0) 2017.12.19
React는 데이터가 부모 컴포넌트에서 자식 컴포넌트로 흐르는 단방향 데이터 흐름을 지향합니다. 이렇게 함으로써 컴포넌트를 단순하고 예측할 수 있게 만들었습니다. 부모는 자식에게 props 값을 전달하고 렌더링 합니다. 최상위 컴포넌트의 속성이 바뀌면 React는 변경 사실을 컴포넌트 트리에 전달하고, 해당 속성을 사용한 모든 컴포넌트를 다시 렌더링합니다. 

 또한, 컴포넌트는 내부 상태 값을 가질 수 있으며, 이 값은 컴포넌트 내부에서만 수정할 수 있습니다. React 컴포넌트는 본질적으로 단수합니다. props와 state, 두 값을 이용해서 가상 표현 객체를 생성하는 함수라고 볼 수 있습니다. 


<props>
- "properties"의 줄임말,  사용자가 컴포넌트에 전달해 보관하길 원하는 데이터를 의미
- 컴포넌트 내부의 immutable data(변하지 않는 데이터)
- jsx 내부에 {this.props.propsName}
- 컴포넌트를 사용할 때, <> 괄호 안에  propsName="value"
- this.props.children 은 기본적으로 갖고 있는 props로서, <Cpnt> 여기에 있는 값이 들어간다.</Cpnt>


직접 실습을 해보도록 하겠습니다. 
props 부분을 빨간색 줄로 표시하였습니다.
아래 캡쳐화면들은 모두 사진을 클릭하면 원본 크기로 보실 수 있습니다.







이번에는 App 컴포넌트의 props를 하위 컴포넌트인 Codelab의 props로 전달하는 방법을 알아봅시다.







 기본 값 설정하는 방법은 아래와 같습니다.

  Component.defaultProps = {...}





Type 설정하는 방법은 아래와 같습니다.

  Component.propTypes = {...}

 유효성 검사기 설명
 ProTypes.array  속성이 배열이여야 한다.
 ProTypes.bool 속성이 부울 값 (true/false)이어야 한다.
 ProTypes.func 속성이 함수여야 한다.
 ProTypes.number 속성이 숫자(또는 구문 분석으로 숫자를 얻을 수 있는 값)여야 한다.
 ProTypes.object 속성이 객채여야 한다.
 ProTypes.string 속성이 문자열이어야 한다.









이번에는 지금까지 배운 것들을 실습해 보도록 하겠습니다.
아래 화면과 같이 아래쪽 흰색 화면에 문자가 잘 출력 되셨나요?






다음 시간에는 React.js 의  핵심적인 기능 중의 하나인

state에 대해 알아보려고 합니다.


오늘도 전문성과 친절함이 부족한 긴 글을 읽어주셔서 고맙습니다.  




안녕하세요? 두번째 시간에는 개발환경설정에 대해서 연재할 예정이였습니다. 

하지만, 로컬(컴퓨터)에 개발환경을 설치하지 않아도 웹으로도 실습이 가능하여, 

설치는 다음에 필요한 시간으로 미루고,

 React에 주요 개념들을 먼저 살펴보도록 하겠습니다. 



제가 이번시간부터 몇 회에 걸쳐서 참고할 인터넷 강의는 무료이며, 
인프런에서 무료로 수강이 가능합니다. 
(회원가입이 귀찮으시면 유튜브에서 리액트를 검색하셔서 참고하셔도 됩니다.)

- 인프런 사이트에 들어가셔서 react를 검색하신 후에 
React & Express 를 이용한 웹 어플리케이션 개발하기 ] 강의 입니다. 

실습이 가능한 아래 사이트로 이동해보도록 하겠습니다.




오른쪽 위에 빨간색 settings를 클릭 하고 
아래 숫자 순서대로 클릭을 해줍니다.


3번 Quick-add 에서 react 을 선택하고 ,
 react-dom을 한번 더 선택하시면
위와 빨간 네모처럼 적용될 것입니다.


ES6는 자바스크립트 최신문법 입니다.

아래 예제에 나오는 Class는 ES6에 새로 도입된 문법입니다. 

- javascript Class 가 궁금하시면 아래 링크를 참조하세요. 



위와 같이 타이핑을 직접 해 보세요. 

자동완성기능이 없어서 오타가 날지 모르니 아래 스크립트를 복사해놓겠습니다

첫번째 실습인데 결과물이 나오지 않으면 포기하실 수도 있으실까봐 
여러분들 위한 저의 작은 배려(?)입니다. 
(사실 저도 처음부터 오타가 나서 오타 찾느라 시간이 오래 걸렸던 것은 비밀입니다.)

앞으로는 잘 하실 수 있을 것이라고 믿고 따로 타이핑 한 것을 복사해 놓지는 않을게요. 


====================================================================
- HTML  내용 :
<div id="root"></div>
====================================================================
- JS 내용 : 
class Codelab extends React.Component {
  render(){
    return (
      <div>React 왕초보</div>
    );
  }
}

class App extends React.Component{
  render(){
    return(
      <Codelab/>
    );
  }
}

ReactDOM.render(<App/>,document.getElementById('root'));
====================================================================


JSX 의 몇가지 특징에 대해서 알아보겠습니다.

1. Nested Element

/* 컴포넌트에서 여러 Element를 렌더링 할 때 
      꼭 container element 안에 포함시켜주세요 */

아래 <div> </div> 안에 넣으라는 의미로 저(?)는 이해 하였습니다.


render() {
    return (
        <div>
            <h1>Hi</h1>
            <h2>Yay! Error is gone.</h2>
        </div>
    )
}


2. JavaScript Expression

/* JSX 안에서 JavaScript를 표현하는 방법은 간단합니다.
    그냥 { } 로 wrapping 하면 됩니다. */


아래 실습화면에 let 이 사용되었는데 , 관련해서 설명은 아래 설명을 참고해주세요. 

let으로 선언한 변수는 변수를 선언한 블록과 그 내부 블록들에서 유효하다. 이럴 경우, let은 var와 같이 동작한다. 가장 큰 차이점은 var 변수의 유효 범위는 전체 외부 함수까지라는 점이다.

다시 직접 타이핑을 해보세요. 
변경된 부분은 빨간색으로 표시하였습니다. 
여러분들도 아래 흰색 화면에 잘 출력되었죠?



3. Inline Style

/* JSX 안에서 style 을 설정 할때는, string 형식을 사용하지 않고
    key 가 camelCase 인 객체가 사용됩니다. */

 camelCase란? 
 다 소문자로 camelcase라고 쓰는 것이 아니고
 단어가 이어질때 첫글자는 대문자로 해주는 것이라고 저(?)는 이해하고 있습니다 .
 예) camelcase (x) -> camelCase (o)


또 직접 타이핑을 해봅시다. 추가되는 부분을 빨간색으로 친절하게(?) 표시하였습니다.



4. Comments


/* JSX 안에서 주석을 작성 할 때는 
       {  /* ... */  }
    형식으로 작성하세요. 

    주의 하실점은 이 역시 Nested Element 부분에 설명했던것과 같이
    container element 안에 주석이 작성되어야 합니다. */

render() {
    return (
        <div>
            { /* This is How You Comment */ }
            { /* Multi-line
                    Testing */ }
                React CodeLab
        </div>
    );
}



이상으로  ES6 Class 와 JSX 에 대해서 알아보았습니다. 잘 이해 되셨나요?

다음 시간에는 React.js 의 가장 기본적이고 핵심적인 기능인 

props를 알아보려고 합니다.

오늘도 전문성과 친절함이 부족한 긴 글을 읽어주셔서 고맙습니다.  


'React > 왕초보 도전' 카테고리의 다른 글

6. 간단한 영화 웹 서비스 만들기 1  (0) 2017.12.19
5. component mapping , 간단한 주소록 구현  (0) 2017.12.19
4. state 소개 , Counter 웹 만들어보기  (0) 2017.12.19
3. props 소개  (0) 2017.12.19
1. React 소개  (0) 2017.12.19
안녕하세요? React왕초보 입니다.

첫시간이니 연재 목적에 대해서 간단한 소개를 하고 연재를 시작하도록 하겠습니다.

저는 이 연재를 통해서 강의를 하거나 지식을 전달하기 보다는 

React를 처음 접하는 제가 과연 웹(앱)을 만들어 볼 수 있는지 도전하는 스토리를 전달하고자 합니다. 

아래는 간단한 제 소개이니 참고하시기 바랍니다. 

---------------------------------------------------------------------------------------------------

React 왕초보

React 왕초보의 앱(웹) 만들기 

React에 대해서 관심만 있는 React 왕초보입니다. 

저처럼 관심만(?) 있는 분들이 React를 통해서 웹(앱) 만들기를 시도해보는 프로젝트입니다.

전문성과 친절함 따위는 없어도 어떻게든 스스로 결과물을 만들어 내는 

좌충우돌 도전기를 연재해보도록 하겠습니다.

(연재되는 내용은 여러분들도 약간의 돈과 시간만 있으면 접할 수 있는 인터넷 강의와

 책을 참고할 것이며, 절대 머리속에서 생각해내지 않는 것임을 주의하시기 바랍니다.)
 
---------------------------------------------------------------------------------------------------
React를 배우고 싶어진 된 계기는 유튜브에서 아래 동영상을  보고 

나도 저런 웹을 만들어 보고 싶어졌기 때문입니다.

뿐만 아니라 리액트(리액트 네이티브)로 개발해서 

앱으로도 출시가 가능할 수 있다는 설명을 보고 혹 하게 되었습니다.

과연 완성을 할 수 있을지는 이 연재가 끝나는 시점에 알게 되겠군요.

노마드 코더의 리액트 웹 서비스 만들기 



동영상에 대해서 요약을 하자면 

첫번째, 자바스크립트 기반이기 때문이다.

두번째, 구조가 간단하다. 요소별, 컴포넌트별로 나눠서 작업이 가능

세번째 ,단방향 데이터 플로우를 가지고 있다. 




그럼 이제부터 react에 대해서 알아보도록 하겠습니다.

네이버에 리액트 나 react 로  검색하면 마음에 드는 사이트를 찾을 수 없었습니다.

그래서 어쩔 수 없이 영어를 못해서 번역기능에만 의존하지만 

구글에서 검색해서 react 에 접속하게 되었습니다.






영어로 열심히 설명이 되어 있네요. 해석이 잘 안됩니다. 

그래서 번역기를 돌려 봅니다.



사용자 인터페이스 구축을 위한 javascript 라이브러리 라고 써 있네요.

한번 배우고 어디서나 쓸 수 있다는 말도 마음에 듭니다. 

시작을 해봐야 하니깐 get started ( 시작하다) 버튼을 눌러볼까요?

위에 화면에 빨간 테두리 부분입니다.




그 유명한 hello world 라는 메세지 출력해 보는 예제가 있네요. 

 설치를 해서 예제를 실행해도 되고, 

설치를 하지 않고도  실행해 볼 수 있는 사이트가 나와 있네요 . 

설치는 다음시간에 할 예정이니 설치를 하지 않고 실행해보겠습니다.

아래에 파란 블럭부분을 클릭하면 새로운 화면으로 넘어가집니다. 

( 클릭은 실제 사이트에서 수행하셔야 합니다;;)

The easiest way to get started with React is to use this Hello World example code on CodePen.



타이핑을 하지도 않았는데 hello world가 화면에 출력됩니다.

어떤 개발언어를 배워도 hello world만 출력할 줄 알면 반은 배웠다는 말을 

들어본 적있는데 벌써 반이나 진행되었습니다.
(혹시 저만 이런 말을 들어봤는지는 모르겠네요;;)

그래도 react를 배우려면 타이핑을 해보는게 좋겠죠? 

여러분도 마음대로 타이핑을 해보세요. 

저는 react왕초보를 출력해보겠습니다. 

아래 빨간 네모 부분에 써 주시기만 하면 됩니다. 





이렇게만 하고 첫 시간을 끝내기는 아쉬우니 하나만 더 실습을 해볼까요?

hello world 화면 오른쪽에 아래 글씨를 클릭해 봅니다. 빨간색 테두리 부분입니다.






화면 중간으로 내리다 보면 아래 글씨를 다시 클릭해서 실습을 할 수 있습니다. 




화면이 출력되면 위에 빨간색 부분에 원하는 메세지를 넣어보세요.  

firstName : 'React', lastName: '왕초보', <h1>안녕,

여러분들도 성공하셨나요?

간단한 내용들이지만 편집을 하면서 정리하려니 생각보다 시간이 오래 걸리네요.

연재를 하면서 점점 더 편집 속도가 빨라지기를 기대합니다. 


다음시간에는 개발환경 구성에 대해서 알아보도록 하겠습니다. 


전문성이 현저하게 떨어지고 , 편집능력도 부족하지만 긴 글 봐주셔서 고맙습니다. 


declare

     x number;

begin

 dbms_job.submit

(

job =>x

,what =>'t_owner.p_test_01;'

,next_date=>sysdate

,interval =>'trunc(sysdate)+1'

,no_parse => false

);

commit;

dbms_output.put_line('job number is:'||to_char(x));

end;

/


create or replace procedure t_owner.p_create_table is

v_sql_cd number(10);

v_sql_msg varchar2(1000);

v_stats_date date;

v_sql varchar2(4000);

v_ymd_1_date number(10);


begin
 select to_char((trunc(sysdate)-1),'yyyymmdd')
into v_ymd_1_date
from dual;

v_stat_date := trunc(sysdate -1);

begin

v_cdr_sql := 'create table t_owner.tb_test_01'|| v_ymd_1_date;
v_cdr_sql := 'tablespace ts_test as ';
v_cdr_sql := 'select * from t_owner.tb_test_01';

execute immediate v_sql;

exception when others then rollback;
v_sql_cd := sql_code;
v_sql_msg := sqlerrm;
end;


insert into t_owner.tb_p_log(co1,co2,co3)
values (v_stats_date,'tb_test_01_'||v_tm_1_date,sysdate);
commit;

end p_create_table;
/


+ Recent posts