망할고양이의 도피처

props

props는 properties를 가리키는 용어입니다. 컴포넌트의 속성을 설정할 때 사용하는 요소입니다. 

컴포넌트를 불러와 사용하는 상위 컴포넌트에서 설정할 수 있습니다. (강좌에서는 상위 컴포넌트 : App 입니다.)

component 하위에 props.js 파일을 하나 생성하도록 합니다. 

Props.js

export default function Props(props){

    return(
        <>
        <div>props를 사용해 볼께요.</div>
        <div>props의 이름은 {props.name} 입니다. </div>
        </>
    );

Apps.js를 아래와 같이 수정 합니다. 

Props.js에서 props값을 출력하도록 작성하고 Apps.js에서 props.name 값을 전달합니다. 

import './App.css';
import Props from './component/Props';
function App() {
  return (
    <div className="App">
      <Props name="abcd"/>
    </div>
  );
}

export default App;

Apps에서 전달한 abcd 값을 삭제하면...?

import './App.css';
import Props from './component/Props';
function App() {
  return (
    <div className="App">
      <Props/>
    </div>
  );
}

export default App;

값이 절달되지 않아 값의 출력이 없습니다. 그럼 기본값을 설정하는 defaultProps를 사용해보겠습니다. 

Props.js를 다시 수정하겠습니다.

export default function Props(props){

    return(
        <>
        <div>props를 사용해 볼께요.</div>
        <div>props의 이름은 {props.name} 입니다. </div>
        </>
    );
}

Props.defaultProps = {
    name : "기본값"
};

Tomcat에서 JNDI를 설정하는 방법을 알아보도록 하겠습니다. 

수정할 파일은 2개 입니다.

context.xml

<WatchedResource>WEB-INF/web.xml</WatchedResource>
<ResourceLink global="jdbc/gcimjndi" name="jdbc/gcimjndi" type="javax.sql.DataSource"/>

server.xml

<Context docBase="system" path="/" reloadable="true" source="org.eclipse.jst.jee.server:system">
	<Resource auth="Container" 
			defaultAutoCommit="false" 
			driverClassName="oracle.jdbc.driver.OracleDriver" 
			factory="<암호화 모듈 사용시 패키지 경로>"
			initialSize="1" maxActive="2" 
			maxWait="10000" minIdle="2" 
			name="<jndi_name>" 
			url="<db_url_info>" 
			username="<db_account_info>" 
			password="<db_account_password_info>" 
			type="javax.sql.DataSource" 
			validationQuery="select 1 from dual" />
</Context>

설정파일을 위와같이 수정 한 후 

name="<jndi_name>" 에 설정한 이름으로 JNDI를 연결하여 사용할 수 있다. 

Spring Framework를 사용하는 경우 context-datasource.xml 이나 db 접속을 위한 내용이 있는 부분을 수정해서 적용할 수 있다.

context-datasource.xml

    <bean id="dataSource" class="org.springframework.jndi.JndiObjectFactoryBean">
        <property name="jndiName" value="<jndi 이름>"/>
        <property name="resourceRef" value="true"/>
    </bean>

web.xml 

	<resource-ref>
		<res-ref-name>[jndi이름]</res-ref-name>
		<res-type>javax.sql.DataSource</res-type>
		<res-auth>Container</res-auth>
	</resource-ref>

버튼을 클릭하거나 내용이 수정되었을때 어떠한 동작을 하도록 해보겠습니다. 

component 폴더 하위에 Event.js파일을 생성합니다. 

export default function Event(){

    return(
        <div>
            <div>
                <h1>Event Test</h1>
                <button>button A</button>
                <button>button B</button>

            </div>
            <input type="text"/>
        </div>
    );
}

생성한 component를 App.js에 추가합니다. 

import './App.css';
import Event from './component/Event';  //추가된 항목
function App() {
  return (
    <div className="App">
      <Event/>
    </div>
  );
}

export default App;

button A를 클릭할 때 alert 창을 호출하도록 작성하겠습니다. 

Event.js 파일을 수정합니다. 

export default function Event(){

    function callAlert(){
       alert("Button A를 클릭했어요");
    }
    return(
        <div>
            <div>
                <h1>Event Test</h1>
                <button onClick={callAlert}>button A</button>
                <button>button B</button>
            </div>
            <input type="text"/>
        </div>
    );
}

button B에 onClick 이벤트를 직접 작성해보도록 하겠습니다. 

Event.js 파일을 수정합니다. 

export default function Event(){

    function callAlert(){
       alert("Button A를 클릭했어요");
    }
    return(
        <div>
            <div>
                <h1>Event Test</h1>
                <button onClick={callAlert}>button A</button>
                <button onClick={() =>{
                    console.log("####### Button Click B");
                    }
                    
                }>button B</button>
            </div>
            <input type="text"/>
        </div>
    );
}

함수로 값을 전달하도록 하겠습니다. 

Event.js 파일을 수정합니다.  (함수 추가, 버튼 추가)

export default function Event(){

    function callAlert(){
       alert("Button A를 클릭했어요");
    }
    function consoleTextPrint(arg){
        console.log("전달받은 값 : " + arg);
    }
    return(
        <div>
            <div>
                <h1>Event Test</h1>
                <button onClick={callAlert}>button A</button>
                <button onClick={() =>{
                    console.log("####### Button Click B");
                    }
                    
                }>button B</button>
                <button onClick={() =>{
                    consoleTextPrint("button Arg 전달!!!");
                    }
                    
                }>button Arg 전달</button>
            </div>
            <input type="text"/>
        </div>
    );
}

input에 내용이 변경될 때 마다 console에 변경된 text를 출력하도록 하겠습니다. ( onChange 사용 )

Event.js 파일을 수정합니다.

export default function Event(){

    /* alert을 호출합니다. */
    function callAlert(){
       alert("Button A를 클릭했어요");
    }

    /* 전달받은 값을 console에 출력합니다. */
    function consoleTextPrint(arg){
        console.log("전달받은 값 : " + arg);
    }
    
    /* input Text 내용을 console에 출력합니다. */
    function printText(e){
        console.log(e.target.value);
    }
    return(
        <div>
            <div>
                <h1>Event Test</h1>
                <button onClick={callAlert}>button A</button>
                <button onClick={() =>{
                    console.log("####### Button Click B");
                    }
                    
                }>button B</button>
                <button onClick={() =>{
                    consoleTextPrint("button Arg 전달!!!");
                    }
                    
                }>button Arg 전달</button>
            </div>
            <input type="text" onChange={printText}/>
        </div>
    );
}

    - input에 onChange를 추가하고 동작할 함수의 이름을 작성합니다.

    - 동작할 함수는 event argument를 받아서 사용할 수 있기 때문에 e.target.value를 사용하여 이벤트를 전달한 객체의

      value값을 사용할 수 있습니다. 

input을 한개 더 추가한 뒤 기존에 생성한 consoleTextPrint 함수를 이용해서 onChange 이벤트 안에 직접 작성해보겠습니다. 

Event.js 파일을 수정합니다.

export default function Event(){

    /* alert을 호출합니다. */
    function callAlert(){
       alert("Button A를 클릭했어요");
    }

    /* 전달받은 값을 console에 출력합니다. */
    function consoleTextPrint(arg){
        console.log("전달받은 값 : " + arg);
    }
    
    /* input Text 내용을 console에 출력합니다. */
    function printText(e){
        console.log(e.target.value);
    }
    return(
        <div>
            <div>
                <h1>Event Test</h1>
                <button onClick={callAlert}>button A</button>
                <button onClick={() =>{
                    console.log("####### Button Click B");
                    }
                    
                }>button B</button>
                <button onClick={() =>{
                    consoleTextPrint("button Arg 전달!!!");
                    }
                    
                }>button Arg 전달</button>
            </div>
            <input type="text" onChange={printText}/>
            <input type="text" onChange={
                e => {
                    const targetValue = e.target.value;
                    consoleTextPrint(targetValue);
                }
            }/>
        </div>
    );
}

Oracle JDK를 사용하거나 OpenJDK를 사용하기 위해 이클립스내의 compiler를 변경해야할 때가 있습니다. 

1. Windows > Preferences로 이동합니다. 

2. 좌측 상단에 Install로 검색하여 검색된 항목 중 java > Installed JREs를 선택합니다. 

3. 우측의 Add 및 Edit를 이용하여 본인이 사용할 컴파일러를 수정하 수 있습니다. 

CSS를 적용하는 방법은 3가지 방법이 있습니다. 

• inline로 바로 작성하는 방법
• CSS파일을 이용하여 작성
  
  • component 에 종속되지 않는 css 작성
  • component 에 종속되는 않는 css 작성

inline로 바로 작성하는 방법

아래 코드처럼 h2 테그안에 style 속성을 객체형식으로 지정하여 사용합니다. 

주의할 점은 '-' 를 사용하지않고 카멜 케이스로 작성합니다. 

export default function Greeting(){
    return <h2 style={
        {
            color : "#F33"
            ,paddingLeft : "200px"
            ,opacity : 0.3
        }
    }>Greeting!!!</h2>
}

CSS파일을 이용하여 작성 - component 에 종속되지 않는 css 작성

create-react-app으로 프로젝트를 생성하면 index.css, App.css가 이미 생성이 되어 있습니다. 

내용을 보면  index.css의 경우 전체 프로젝트에 영향을 미치는 css가 작성되어 있고 App.css는 App컴포넌트에만 적용되는 것처럼 작성이 되어있습니다.

App.css -아래 코드처럼 class를 추가합니다. 

.test {
  width: 100px;
  height: 100px;
  background-color: rgb(138, 97, 35);
}

App.js - <div className='test'>App component</div> 를 추가하였습니다. 

기존 class를 적용하는것처럼 class="클래스명"으로 사용하는 형태가 아닌  className이라는 속성으로 적용해야합니다.

import './App.css';
import Greeting from './component/Greeting';  
import Welcome from './component/Welcome'; 
function App() {
  return (
    <div className="App">
      <div className='test'>App component</div>
      <Greeting />   
      <Welcome />
    </div>
  );
}

export default App;

Greeting.css 파일을 생성한 뒤  아래 코드를 추가합니다. (동일한 class명)

.test {
    width: 200px;
    height: 200px;
    background-color: rgb(163, 104, 16);
  }

Greeting.js

import './Greeting.css';
export default function Greeting(){
    return (
        <div>
            <h2 style={
                    {
                        color : "#F33"
                        ,paddingLeft : "200px"
                        ,opacity : 0.3
                        ,border : "1px"
                        ,borderRight : "2px solid #111"
                    }
            }>Greeting!!!</h2>
            <div className="test">Greeting component</div>
        </div>
    )
}

하지만 이 두가지 파일에 모두 동일한  class 명으로 css를 작성하면 나중에 import되는 class가 오버라이딩하여 기존 동일한 class명의 css를 적용할 수 업습니다.  

위의 그림을 보면 Greeting.css의 내용이 App Component에도 적용되었습니다.  각각의 css파일이 각 component 별로 종속되어 적용되는 것이 아니라 실제 생성된느 패이지의 head영역에 모두 적용되기 때문에 동일한 css class명은 사용할 수 없습니다.  

CSS파일을 이용하여 작성 - component 에 종속되는 css 작성

그렇다면 각 component 별로 css가 적용되는 방법을 알아보도록 하겠습니다.

Greeting.css의 파일명을 Greeting.module.css로 변경합니다. 일반적으로 파일명을 작성할때 component에 종속되는 css는 component의 이름과 동일하게 작성합니다. 

파일명이 변경(오류가 발생함) 되었고 component에 종속되는 css를 작성하기 위해 기존 코드를 수정합니다. 

Greeting.js

import styles from './Greeting.module.css';   // 변경된 부분
export default function Greeting(){
    return (
        <div>
            <h2 style={
                    {
                        color : "#F33"
                        ,paddingLeft : "200px"
                        ,opacity : 0.3
                        ,border : "1px"
                        ,borderRight : "2px solid #111"
                    }
            }>Greeting!!!</h2>
            <div className={styles.test}>Greeting component</div>  // 변경된부분
        </div>
    )
}

import './Greeting.css' 항목을 위 예시 코드와 같이 import styles from './Greeting.module.css'; 로 변경합니다. 

reactJS CSS작성법에 알아보았습니다. 

생성되어있는 App.js에 컴포넌트를 추가하여 화면을 그리는 간단한 작업을 수행하겠습니다. 

src 폴더 하위에 component 폴더를 생성합니다. 

새로 생성한 component하위에 3개의 compoent 를 생성할 계획입니다. 

• Greeting.js
• Money.js
• Welcome.js

Greeting.js 

export default function Greeting(){
    return <h2>Greeting!!!</h2>
}

Welcome.js

export default function Welcome(){
    return <h2>Welcome !!</h2>   
}

참고. Component를 작성할때 작성 방법

//방법 1
export default function Welcome(){
    return <h2>Welcome !!</h2>   
}

//방법 2
const Welcome = function(){
    return <h2>Welcome !!</h2>   
}
export defailt Welcome;

//방법 3
const Welcome = () => {
    return <h2>Welcome !!</h2>   
}
export defailt Welcome;

이렇게 작성된 두개의 Component를 App.js에서 사용해 보겠습니다. 

App.js

import './App.css';
import Greeting from './component/Greeting';
import Welcome from './component/Welcome';
function App() {
  return (
    <div className="App">
      <Greeting />
      <Welcome/>
    </div>
  );
}

export default App;

이번에는 Welcome안에 Money를 넣어서 화면을 구성하도록 하겠습니다. 

Moneny.js 를 작성합니다. 

export default function Money(){
    return <h3>Money</h3>
}

Welcome.js를 아래와 같이 수정합니다.

import Money from './Money'

export default function Welcome(){
    return (
        <h2>Welcome !!</h2>   
        <Money/>
    )
}

그리고 저장을 하면 아래와 같이 오류가 발생합니다. 

JSX는 return할때 한개의 Object만 return할 수 있습니다. 

즉, Welcome의 <h2>와 <Money/> 안에 있는 <h3>가 리턴되어 2개의 Object가 리턴됨으로서 오류가 발생했습니다. 

Welcome.js의 코드를 아래와 같이 수정합니다. 

import Money from './Money'

export default function Welcome(){
    return (
        <abcd>
        <h2>Welcome !!</h2>   
        <Money/>
        </abcd>
    )
}

<abcd>를 추가하여 한개의 Object로 변경하여 retrurn되도록 수정하면 정상적으로 화면이 실행됩니다. 

Component는 리액트에서 개발할 모든 애플리케이션의  최소단위의 조각입니다. 

Component라는 조각으로 구성하여 유지보수의 반복작업을 줄일수 있습니다. UI를 재사용 가능한 개별적인 여러 조각으로 나누고, 각 조각을 개별적으로 나누어 코딩합니다. 컴포넌트라는 여러 개별 부분으로 분할된 UI를 보고 독립적으로 작업하고 최종 UI가 될 상위 컴포넌트에서 모두 병합하여 화면을 구성할 수 있습니다. 

• 컴포넌트 이름은 항상 대문자로 시작하도록 한다.
• 컴포넌트의 종류는 함수형 (Stateless Functional Component)과 클래스형 (Class Component)이 있다.
• 함수 형태가 더 최근에 나온 문법인 만큼 요즘엔 함수 형태가 더 많이 쓰인다. 하지만 함수 형태가 클래스 형태의 대체물은 아니다. 단지 새로 나온 문법일 뿐이다. 리액트 프로젝트의 유지보수를 위해서는 클래스 형태로 컴포넌트를 작성하는 방법 또한 알아두어야 한다.

https://ko.reactjs.org/docs/components-and-props.html

<함수형 컴포넌트 예시>

function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}

<클래스형 컴포넌트 예시>

class Welcome extends React.Component {
  render() {
    return <h1>Hello, {this.props.name}</h1>;
  }
}

create-react-app를 이용하여 개발환경을 구축한 후 폴더의 내용을 보면 아래 그림과 같이 여러 폴더 및 파일이 존재한다.

각  파일 및 폴더별 역활을 알아보도록 하자.

App.js

App.js를 수정할 경우 화면의 reload(새로고침) 없이 적용되는 것을 확인할 수 있습니다.

이 기능을 HMR(Hot Module Replacement) 이라고 합니다. HMR은 브라우저를 새로 고치지 않아도 웹팩으로 빌드한 결과물이 웹 애플리케이션에 실시간으로 반영될 수 있게 도와주는 설정입니다

Hot Module Replacement(HMR)는 모듈전체를 다시 로드하지 않고 애플리케이션이 실행되는 동안 교환, 추가 또는 제거합니다. 다음과 같은 몇 가지 방법으로 개발 속도를 크게 높일 수 있습니다. 전체 다시 로드 중에 손실되는 애플리케이션의 상태를 유지합니다.

package.json

모든 npm 패키지는 package.json 파일을 프로젝트 루트에 포함하고 있습니다

package.json 은 주고 받는 패키지에 대한 상세 설명서라고 할 수 있습니다. 즉, 패키지의 이름, 버전, 데이터 등이 담긴 파일이 바로 package.json입니다. 이러한 정보들은 모두 npm 뿐만 아니라 패키지의 최종 사용자에게 무척 중요한 것들입니다.

이러한 package.json 파일은 보통 Node.js 프로젝트의 루트 디렉토리에 위치해 있으며, npm 은 이를 통해 프로젝트를 식별하고, 프로젝트의 디펜던시(dependency)를 처리합니다

그림과 같이 dependencies영역에는 설치한 모듈에 대한 환경구성을 위한 정보가 작성되어 있으며 서버를 실행할 때 사용한 npm start와 같은 명령어가 scripts에 작성되어 있습니다. 

Create-react-app 설치 이후 서버를 실행하기 위해 아래 그림과 같이 터미널을 열어준다.

그리고 명령어를 입력

서버가 실행되어야하지만 오류가 나는 경우가 있다.

# 오류.1 - 터미널이 Winodws Powershell로 되어있는경우 

해결방안 

기본터미널 프로그램을 변경한다. 

CTRL + SHIFT + P 를 눌러 아래 그림과 같은 창을 호출한다.

Selectr Default Profile이라는 키워드로 검색 후 아래 항목을 선택

Terminal : Select Default Profile 선택 후 Command Prompt를 선택하여 기본 터미널 프로그램을 선택합니다. 

# 오류.2 기본터미널 프로그램을 cmd로 변경하였으나 npm이 실행이 되지 않는 경우

해결방안

설치한 nodejs의 경로를 환경변수에 추가한다.

# 오류.2에 해당하는겨우 VSCode를 종료한 뒤 재실행한다.

위의 그림과 같이 터미널에 정상적으로 서버가 실햄됨과 동시에 브라어저에 위 그림과 같은 페이지가 열리게 된다. 

먼저 ReactJS가 설치될 폴더를 하나 생성합니다. 

이 생성된 폴더에 ReactJS를 설치할 계획입니다.

터미널을 하나 실행합니다. 

윈도우즈 검색에서 cmd 라고 검색해도 아래 그림과 같이 찾을 수 있습니다. 

명령 프롬프트에 아래 그림과 같이 입력하여 create-react-app를 설치합니다. (npm이 아니고 npx 입니다.)

최초 설치시에는 시간이 좀 걸릴 수 있습니다. 

<주의사항 react_01 이라는 프로젝트 명은 대문사를 사용하면 오류가 발생합니다. ex) myReactJS >

실행 결과 

.

.

.

설치가 완료되었다면 이전에 설치한 VSCode를 실행하고 해당 폴더를 열어줍니다. 

예시) c:\dev\react_01

해당 폴더를 선택해준 경우 정상적으로 파일이 자동으로 생성되어 있는 것을 확인할 수 있습니다.

Webpack, Babel등을 추가로 설치하여 개발환경을 구성하는데에 초보자에게는 상당한 어려움이 있으나 Create-react-app를 이용하면 환경설정을 쉽게 할 수 있습니다.