'개발/ReactJs' 카테고리의 글 목록

개발/ReactJs

4. 반복되는 부분 컴포넌트 매핑

2017. 5. 10. 11:33

[ 비슷한 코드를 반복적으로 "렌더링"하는 방법 ]

데이터 배열 처리시

map() 메서드는 파라미터로 전달된 함수를 통하여 배열 내의 각

요소를 처리해서 그 결과로 새로운 배열을 생성한다.

arr.map(callback,[thisArg])

callback : 새로운 배열의 요소를 생성하는 함수로서, 다음 세가지 인수를 가진다.

- currentValue : 현재 처리되고 있는 요소

- index : 현재 처리되고 있는 요소의 index 값

- array : 메소드가 불려진 배열

thisArg(선택항목) : callback 함수 내부에서 사용할 this 값을 설정

ex) var numbers = [1,2,3,4,5]; // 처음 값 1,2,3,4,5

var processed = numbers.map(function(num){

return num*num;

});

//processed가 갖고 있는 값 : 1,4,9,16,25

이걸 ES6 문법으로 작성해 보면(arrow function)

let numbers = [1,2,3,4,5];

let result = numbers.map((num) => {

return num * num;

});

ES6의 arrow 문법 예제)

- 파라미터 한개인 경우 : let one = a => console.log(a)

이건 )

var one = function one(a){

return console.log(a);

}

와 같음

- 파라미터가 두개인 경우 :

let two = (a,b)=>console.log(a,b);

- 함수의 내부가 여러줄인 경우

let three = (c,d)=>{

console.log(c);

console.log(d);

}

- 파라미터가 없는 경우

let four = ()=>{

console.log("no params");

}

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

166

167

168

169

170

171

*/
 
// [ react에서 배열을 Component로 매핑 ]
 
// 우선, 반복되는 작업을 직접 수동으로 하는 안좋은 예제
 
class Contact extends React.Component{
 
  render(){
 
    return(
 
      <div>
 
        <div>Abet 101-0000-0001</div>
 
        <div>Betty 101-0000-0001</div>
 
        <div>Charlie 101-0000-0001</div>
 
       <div>David 101-0000-0001</div>
 
      </div>
 
    );
 
  }
 
};
 
class App extends React.Component{
 
  render(){
 
    return(
 
      <Contact/>
 
    );
 
  }
 
};
 
ReactDOM.render(<App/>,document.getElementById("root"));
 
// 반복작업하는 부분을 따로 컴포넌트로 만들어 보자.
 
class ContactInfo extends React.Component {
 
  render() {
 
    return (
 
      <div>{this.props.contact.name} {this.props.contact.phone}</div>
 
    );
 
  }
 
}
 
class Contact extends React.Component {
 
  constructor(props) {
 
    super(props);
 
    this.state = {
 
      contactData: [
 
        { name: 'Abet', phone: '010-0000-0001' },
 
        { name: 'Betty', phone: '010-0000-0002' },
 
        { name: 'Charlie', phone: '010-0000-0003' },
 
        { name: 'David', phone: '010-0000-0004' }
 
      ]
 
    }
 
  }
 
  render() {
 
    const mapToComponent = (data) => { // 전달받은 데이터 배열을 컴포넌트 배열로
 
      return data.map((contact, i) => {
 
        return (<ContactInfo contact={contact} key={i}/>);
 
      });
 
    };
 
    return (
 
      <div>
 
        { mapToComponent(this.state.contactData) } <!-- 매개변수로 배열이 들어옴 -->
 
      </div>
 
    );
 
  }
 
}
 
class App extends React.Component {
 
  render() {
 
    return (
 
      <Contact/>
 
    );
 
  }
 
};
 
ReactDOM.render(
 
  <App></App>,
 
  document.getElementById("root")
 
);

저작자표시 비영리

'개발 > ReactJs' 카테고리의 다른 글

3. 유동적인 데이터를 넣는 state (0)	2017.05.10
2.Props와 Type, DefaultProps (0)	2017.05.10
1.ES6 기본문법과 JSX 기본 문법 (0)	2017.05.10

3. 유동적인 데이터를 넣는 state

2017. 5. 10. 10:45

/*
  [ state ]
  : 컴포넌트에서 유동적인 데이터를 보여줄 때 사용됨.
  : JSX 내부에 {this.state.stateName}
  : 초기값 설정이 필수, 생성자(constructor)에서 
    this.state = {}으로 설정
  : 값을 수정할 때에는 this.setState({...}), 렌더링 된 다음엔
    this.state = 절대 사용하지 말 것!
*/
 
class Counter extends React.Component{
  // 생성자
  constructor(props){
    super(props); // 상속받은 부모 생성자를 통해 초기화
    this.state = { // 생성자에서 초기값 설정해주는 것(필수임...)
      value:0
    };
    this.handleClick = this.handleClick.bind(this);
  }
   
  // 클릭됐을 때 동작할 메서드 정의
  // 이 메서드를 클릭할 때 동작하도록 하려면 onClick으로 지정하면 된다.
  handleClick(){
    this.setState({
      value:this.state.value + 1
    });
  }
   
   
  //랜더링
  render(){
    return(
      <div>
        <div>{this.state.value}</div>
        <!--
          클릭이벤트 메서드를 지정할 때 연결시켜줘야대는대 이때, this를 써줘야함(어떤 this인지 모르는걸 방지하기 위해)
: onCLick={this.handleClick.bind(this)}
근대 이 태그에서 직접 바인드하는 것보다 생성자에서 
바인딩시켜주는 것이 좋다. 생성자 쪽을 보자.
this.handleClick = this.handleClick.bind(this); 를 적용해주고 사용하자
 
그럼, [this.handleClick() 이렇게하면 어떻게 되나?]
  : 함수가 실행되긴하지만, 무한반복되며 실행되니까
    절때 () 넣지 말자!
        -->
        <button onClick={this.handleClick}>Press Me</button>
      </div>
    );  
  }
};
 
class App extends React.Component{
  render(){
    return(
      <Counter />
    );
  }
};
ReactDOM.render(<App/>,document.getElementById("root"));

html 쪽에서

저작자표시 비영리

'개발 > ReactJs' 카테고리의 다른 글

4. 반복되는 부분 컴포넌트 매핑 (0)	2017.05.10
2.Props와 Type, DefaultProps (0)	2017.05.10
1.ES6 기본문법과 JSX 기본 문법 (0)	2017.05.10

2.Props와 Type, DefaultProps

2017. 5. 10. 09:54

100

101

102

/*
  [ props의 개념 ]
  - 컴포넌트 내부의 immutable Data(변하지 않는 데이터)
  - JSX 내부에 {this.props.propsName}
  - 컴포넌트를 사용할 때, <> 괄호 안에 propsName="value"
  - this.props.children 은 기본적으로 갖고있는 props로서,
    <Cpnt>여기에 있는 값들이 들어간다.</Cpnt>
*/
 
class Codelab extends React.Component{
  render(){
    return(
      <div>
        <h1>Hello{this.props.name}</h1> <!-- 저부분에 값을 넣을 거란 의미 -->
        <div>{this.props.children}</div>
      </div>
    );
  }
}
 
class App extends React.Component{
  render(){
    return(
      // name(props이름) = {props에 지정할 값}
      // 여기선 {this.props.name}으로 또 값 입력할 수 있게끔 한 것 이후 아래에서 defaultProps로 세팅함
      <Codelab name={this.props.name}>{this.props.name}</Codelab> // 태그 사이에 들어가는게 {this.props.children} 부분에 들어가도록 default로 지정되어있다.
    );
  }
}
 
/*
  [props의 기본 값 설정하는 방법]
  : 위와같이 데이터를 직접 넣는 방법은 당연히 사용하고
  : 최초 초기값 정도로 생각하면 되겠다.
  Component.defaultProps = {propvalue:값}
*/
class DefaultSettingTest extends React.Component{
  render(){
    return(
      <div>{this.props.value}</div>
    );
  }
};
DefaultSettingTest.defaultProps = {
  value:0
};
 
/*
  [ Type 검증 ]
  특정 props값이 타입이 다르거나, 입력하지 않거나 등을 체크
  여러 사람이 같이 작업할 경우 안정성을 위해 지정한다.
  Component.propTypes = {...}
*/
class TypeCheckTest extends React.Component{
  render(){
    return(
      <div>
         {this.props.value2}
         {this.props.secondValue2}
         {this.props.thirdValue2}
      </div>
    );
  }
};
TypeCheckTest.propTypes = {
  value2:React.PropTypes.string,
  secondValue2:React.PropTypes.number,
  thirdValue2:React.PropTypes.any.isRequired
};
 
// Ex)
class Ex extends React.Component{
  render(){
    return(
      <div>
        <h1>Hello{this.props.name}</h1>
        <h2>{this.props.number}</h2>
        <div>{this.props.children}</div>
      </div>
    );
  }
};
 
Ex.propTypes = {
  name:React.PropTypes.string,
  number:React.PropTypes.number.isRequired
};
// default prop 값 지정
Ex.defaultProps = {
  name:'Unknown'
}
 
class App2 extends React.Component{
  render(){
    return(
      <Ex name={this.props.name} number={this.props.number}>{this.props.children}</Ex>
    );
  }
}
ReactDOM.render(<App2 number={5}>I am your child</App2>,document.getElementById("root"));
 
ReactDOM.render(<App name="velopert"/>,document.getElementById("root"));

html 쪽에서

저작자표시 비영리

'개발 > ReactJs' 카테고리의 다른 글

4. 반복되는 부분 컴포넌트 매핑 (0)	2017.05.10
3. 유동적인 데이터를 넣는 state (0)	2017.05.10
1.ES6 기본문법과 JSX 기본 문법 (0)	2017.05.10

1.ES6 기본문법과 JSX 기본 문법

2017. 5. 10. 03:53

- 필요한 것

1) Babel : ES6문법을 -> ES5문법으로 변환해주면서 JSX도 지원해줌(구 브라우저도 지원하기 위해 추가)

2) React :

<script src="

https://cdnjs.cloudflare.com/ajax/libs/react/15.4.2/react.min.js" />

3) ReactDOM :

리액트는 컴포넌트 기반!!!!

[ JavaScript 영역 ]

class Codelab extends React.Component{ // React컴포넌트

render(){

// 컴포넌트가 어떻게 생길지 정의해줌

// JSX : javascript 상에서 html 태그를 그대로

// 사용 가능

// ""로 감싸지 않는다.

// BaBel에서 지원해줌

let text = "Hi I am codelab";

// let : ES6의 문법 var는 스코프가 함수영역

// let은 블럭단위임, ES6에선 let을 관습적으로 사용

// 어떤 뷰를 보여줄지 JSX 형태로 리턴해주면 됨

// JSX에서 자바스크립트를 사용하려면 {}로 감싸주면된다.

let style = {

backgroundColor:'aqua'

};

return (

// Element가 여러개일 때는 꼭 container:div와 같은 것 내부에 와야함

<span>multiElement</span>

</div>

);

}

class App extends React.Component{

render(){

return(

);

}

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

// 2번쨰 인자에 첫번째 컴포넌트를 그려줘라

// id가 root인 div에다가 App 컴포넌트를 랜더링해줘라.

// JSX의 특징

- 컴포넌트에서 여러 Element를 렌더링할 때

꼭 container element 안에 포함시켜줘야함

div와 같은...

이렇게 X

<div>

</div>

이렇게 O

JSX 안에서 자바스크립트를 표현할 때는 {}로 해주면 된다.

[ html 코드 ]

저작자표시 비영리

'개발 > ReactJs' 카테고리의 다른 글

4. 반복되는 부분 컴포넌트 매핑 (0)	2017.05.10
3. 유동적인 데이터를 넣는 state (0)	2017.05.10
2.Props와 Type, DefaultProps (0)	2017.05.10

PREV 1 NEXT

내 블로그 - 관리자 홈 전환	`Q` `Q`
새 글 쓰기	`W` `W`

글 수정 (권한 있는 경우)	`E` `E`
댓글 영역으로 이동	`C` `C`

이 페이지의 URL 복사	`S` `S`
맨 위로 이동	`T` `T`
티스토리 홈 이동	`H` `H`
단축키 안내	`Shift` + `/` `⇧` + `/`

악덕고용주의 개발 일기

개발/ReactJs

4. 반복되는 부분 컴포넌트 매핑

'개발 > ReactJs' 카테고리의 다른 글

3. 유동적인 데이터를 넣는 state

'개발 > ReactJs' 카테고리의 다른 글

2.Props와 Type, DefaultProps

'개발 > ReactJs' 카테고리의 다른 글

1.ES6 기본문법과 JSX 기본 문법

'개발 > ReactJs' 카테고리의 다른 글

+ Recent posts

티스토리툴바

개인정보

단축키

내 블로그

블로그 게시글

모든 영역