1. 인자값 전달하기

function Food(props){
	{fav} = props; //fav를 props.fav로 선언하는거임
    retrun <h1> i like {fav} </h1>; }
}
function Food({name, picture}){
	return(
    	<h1> i like {name}</h1>
        <img src={picture} />
    )
}

<Food name={dish.name} picture = {dish.image} // 이렇게 호출하면됨

 

2.함수형 컴포넌트 & 클래스형 컴포넌트

//함수형 컴포넌트
import React from "react";

function App(){
	const name = 'react';
    retrun <div classname="react>{name}</div>;
}

//클래스형 컴포넌트
import React, {Component} from 'react'

class App extends Component{
	render(){
    	const name = 'react;
        return <div classname="react>{name}</div>;
    }
}

//특징 : render가 있음

 

'일상 > React' 카테고리의 다른 글

React 공부 (with nico 4장)  (0) 2021.01.08
React 공부 (with nico 3장)  (0) 2021.01.07
React 공부 (with nico 2장)  (0) 2021.01.07
React 공부 (with nico 1장)  (0) 2021.01.06
React 공부 (with reactjs.org 2)  (0) 2021.01.05

4.0 Introduction to the Movie DB API

 

-API 키 받아오기

 

 

4.1 Sexy Networking with Axios Instances

//src에 api.js만들어줌
//yarn add axios 해주기

import axios from "axios";

const api = axios.create({
  baseURL: "https://api.themoviedb.org/3/",
  params: {
    api_key: "752f18d6d4ff8f2972e298adcbc4af9b",
    language: "en-US"
  }
});

export default api;

//기본 API주소에서 파라미터들 원하는거 주고 Axios로 받아오는거임

 

 

4.2 API Verbs Part One

export const moviesApi = {
    nowPlaying: () => api.get("movie/now_playing"),
    upcoming: () => api.get("movie/upcoming"),
    popular: () => api.get("movie/popular")
  };
  
export const tvApi = {
    topRated: () => api.get("tv/top_rated"),
    popular: () => api.get("tv/popular"),
    airingToday: () => api.get("tv/airing_today")
  };
  
  //API 불러오기

 

4.3 API Verbs Part Two 

 

export const moviesApi = {
    nowPlaying: () => api.get("movie/now_playing"),
    upcoming: () => api.get("movie/upcoming"),
    popular: () => api.get("movie/popular"),
    movieDetail: id =>
      api.get(`movie/${id}`, {
        params: {
          append_to_response: "videos"
        }
      }),
    search: term =>
      api.get("search/movie", {
        params: {
          query: encodeURIComponent(term)
        }
      })
  };
  
export const tvApi = {
    topRated: () => api.get("tv/top_rated"),
    popular: () => api.get("tv/popular"),
    airingToday: () => api.get("tv/airing_today"),
    showDetail: id =>
      api.get(`tv/${id}`, {
        params: {
          append_to_response: "videos"
        }
      }),
    search: term =>
      api.get("search/tv", {
        params: {
          query: encodeURIComponent(term)
        }
      })
  };
  //조금 추가해서 search기능 만들었음.

'일상 > React' 카테고리의 다른 글

React 공부 (복습, 오답노트)  (0) 2021.01.13
React 공부 (with nico 3장)  (0) 2021.01.07
React 공부 (with nico 2장)  (0) 2021.01.07
React 공부 (with nico 1장)  (0) 2021.01.06
React 공부 (with reactjs.org 2)  (0) 2021.01.05

3.0 CSS in React part One

 

//style.css를 index.js랑 같은 곳에 만들어 준다.

//Header.js를 Components안에 Header 폴더를 만들고 그안에 넣고 새로 index.js를 만들자
//내용은
import Header from "./Header";

export default Header;

//style.css를 header 폴더에 옮기고 나서 header.css로 변경해줌
.nav ul {
    display : flex;
}
//내용은 이렇게 쓰면 컴포넌트 폴더 안에 Header 폴더에 header.css, index.js, header.js가 한몸임

 

3.1 CSS in React part Two

// 좀더 한몸이 되게 해보기

//header.css를 header.module.css로 바꾸기
//그럼 header.js에서 import를 import styles from "./Header.module.css"; 해주기

//css파일에
.navList {
    display : flex;
}

//js에서는 이렇게 씀
    <header className={styles.navList}>

//그럼 다른 파일에서도 navList를 쓸 수 있음

 

3.2 CSS in React part Three

 

// 이번에는 header 파일이 필요없는 그런 걸 해볼거임 일단 header.js를 밖으로 빼고 다지우자

//yarn add styled-components

//import 추가하기
import style from "styled-components" 

//header.js를 이렇게 작성함 LIST는 이제 어디서든 쓰기가능
import React from "react";
import { Link } from "react-router-dom";
import styled from "styled-components";

const Header = styled.header``;

const List = styled.ul`
  display: flex;
  &:hover {
    background-color: blue;
  }
`;

const Item = styled.li``;

const SLink = styled(Link)``;

export default () => (
  <Header>
    <List>
      <Item>
        <SLink to="/">Movies</SLink>
      </Item>
      <Item>
        <SLink to="/tv">TV</SLink>
      </Item>
      <Item>
        <SLink to="/search">Search</SLink>
      </Item>
    </List>
  </Header>
);

//이후에 라우터안에 header 넣어주기

 

3.3 GlobalStyles and Header

//이번에는 css를 글로벌하게 해보자
//yarn add styled-reset --> 초기화

나머지는 따라씀
globalsytle 추가하고 끝

 

3.4 Location Aware Header

 

//withRouter는 다른 라우터를 감싸는 라우터임

'일상 > React' 카테고리의 다른 글

React 공부 (복습, 오답노트)  (0) 2021.01.13
React 공부 (with nico 4장)  (0) 2021.01.08
React 공부 (with nico 2장)  (0) 2021.01.07
React 공부 (with nico 1장)  (0) 2021.01.06
React 공부 (with reactjs.org 2)  (0) 2021.01.05

2.0 Setting up the Project

 

//파일 만들기
npx create-react-app JIWON(이름)

//그리고 App.js, index.js빼고 다 지우기

//index.js 내용
import React from 'react';
import ReactDOM from 'react-dom';
import App from './Components/App';

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


//App.js내용
import React, {Component } from "react";

class App extends Component {
	render() {
    	return <div className="App" />;
    }
}

//이후에 yarn add prop-types

 

 

2.1 React Router Part One

//yarn add react-router-dom 으로 돔 다움받기

//src안에 Components라는 폴더 만들고 Router.js + App.js 두개 넣기

// 나머지 파일들은 src및에 Routes라는 폴더 안에 있음

//App.js안에 render안에 return안에 어떤것을 보여줄지 1개의 컴포넌트로 넣어주셈

//Router.js를 만들고

import React from "react";
import {BrowserRouter as Router, Route, Redirect, Switch} from "react-router-dom";
import Home from "../Routes/Home";
import TV from "../Routes/TV";
import Search from "../Routes/Search";

export default () => (
    <Router>
        <Switch>
            <Route path="/" exact component={Home} />
            <Route path="/tv" exact component={TV} />
            <Route path="/tv/popular" render={() => <h1>PoPULAR</h1>} />
            <Route path="/search" exact component={Search} />
            <Redirect from="*" to="/" />
        </Switch>
    </Router>
);
//이런느낌으로 만들기

 

 

2.2 React Router Part Two

//Components에 Header.js 만들기 (이게 위에 슬라이드 인듯)

//내용은 이렇게

import React from "react";

export default () => (
    <header>
        <ul>
            <li>
                <a href="/">Movies</a>
            </li>
            <li>
                <a href="/TV">TV</a>
            </li>
            <li>
                <a href="/Search">Search</a>
            </li>
        </ul>
    </header>
)

//그리고 위에 2.1의 코드에서 Redirect는 아무것도 일치하지 않으면 저기로 가게 해둔다는 의미임
//exact붙이면 무조건 똑같이 타이핑 해야된다는거고

'일상 > React' 카테고리의 다른 글

React 공부 (with nico 4장)  (0) 2021.01.08
React 공부 (with nico 3장)  (0) 2021.01.07
React 공부 (with nico 1장)  (0) 2021.01.06
React 공부 (with reactjs.org 2)  (0) 2021.01.05
React 공부 (with reactjs.org)  (0) 2021.01.05

1.1 Arrow Function

- 화살표 함수를 쓰면 return을 안써도 됨

 

- 인자가 한개일때는 괄호를 안써도 됨

 

const sayHello = (name="Human") => "Hello" + name

const nico = sayHello();

console.log(nico);

button.addEventListener("click", event => console.log(event));

 

 

1.2 template Literals

-`` 잘쓰기, 변수는 ${변수} 이렇게 넣어줌 좀 더 간편하게 나타냄

 

const sayHello = (name) => `Hello ${name}`;

 

 

1.3 Object Destructuring

-좀 더 변수를 효율적으로 담는 방법

 

const human ={
	name : "jiwon",
    lastName : "kim",
    nation : "korea",
    favFood : {
    	break : "hey",
        lunch : "two",
        dinner : "three"
    }
}

//비효율적
const name = human.name

//효율
const {name, lastName, nation:nana, favFood :{break, lunch, dinner}} = human;

console.log(name, lastName, nana);

 

 

1.4 Spread Operator

- 이렇게 unpack해서 배열에 넣어주어야함. [], {} 둘다 가능

 

const Days = ["Mon", "Thu", "Wed"];
const otherDays = ["Tue", "Fri", "Sat"];

//두개를 합치려면
const allDays = [...days, ...otherDays];

console.log(allDays);

 

1.5 Classes

-객체지향을 따름 --> 상속 가능

 

class Human{
	constructor (name, lastName){
    	this.name = name;
        this.lastName = lastName;
    }
}

class Baby extends Human{
	cry(){
    	console.log("Waaaa");
    }
    sayName(){
    	console.log(`My name is ${this.name}`)
    }
}

const myBaby = new Baby("mini","me");

console.log(myBaby.cry(), myBaby.sayName());

 

1.6 Arrow map

-array를 전체적으로 바꿀때는 이렇게 map을 사용하면 좋음

 

cosnt days = ["M","T","W","T","F"];

//Smile 추가하기
const addSmile = day => `smile ${day}`
const smileDays = days.map(addSmile);

//index 추가하기
const numDays = days.map((day,index) => `${index} ${day}`);

console.log(smileDays);

 

1.7 Array filter

-배열에서 원하는 것만 추출하기

 

const num = [2,3,4,5,6,7,8,10,20,30,5,40]

const biggerTen = numers.filter(number => number > 10);

console.log(biggerTen);

 

 

1.8 ForEach includes push

-foreach, push 등의 다양한 배열함수 공부

 

let posts = ["hi", "hello", "bye"];

if (posts.includes("hello")){
	posts.push("hello");
}

posts.forEach(post => console.log(post));

'일상 > React' 카테고리의 다른 글

React 공부 (with nico 4장)  (0) 2021.01.08
React 공부 (with nico 3장)  (0) 2021.01.07
React 공부 (with nico 2장)  (0) 2021.01.07
React 공부 (with reactjs.org 2)  (0) 2021.01.05
React 공부 (with reactjs.org)  (0) 2021.01.05

참고 : https://ko.reactjs.org/docs/handling-events.html

 

이벤트 처리하기 – React

A JavaScript library for building user interfaces

ko.reactjs.org

-Event 처리 bind 및 렌더링 관련 이야기라서 꼭 다시 이해하고, 콜백 이해하기

 


참고 : https://ko.reactjs.org/docs/conditional-rendering.html

 

조건부 렌더링 – React

A JavaScript library for building user interfaces

ko.reactjs.org

 

lass LoginControl extends React.Component {
  constructor(props) {
    super(props);
    this.handleLoginClick = this.handleLoginClick.bind(this);
    this.handleLogoutClick = this.handleLogoutClick.bind(this);
    this.state = {isLoggedIn: false};
  }

  handleLoginClick() {
    this.setState({isLoggedIn: true});
  }

  handleLogoutClick() {
    this.setState({isLoggedIn: false});
  }

  render() {
    const isLoggedIn = this.state.isLoggedIn;
    let button;
    if (isLoggedIn) {
      button = <LogoutButton onClick={this.handleLogoutClick} />;
    } else {
      button = <LoginButton onClick={this.handleLoginClick} />;
    }

    return (
      <div>
        <Greeting isLoggedIn={isLoggedIn} />
        {button}
      </div>
    );
  }
}

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

-조건문을 이렇게 표현할 수 있음. 대부분 state를 사용하는듯

 

function Mailbox(props) {
  const unreadMessages = props.unreadMessages;
  return (
    <div>
      <h1>Hello!</h1>
      {unreadMessages.length > 0 &&
        <h2>
          You have {unreadMessages.length} unread messages.
        </h2>
      }
    </div>
  );
}

const messages = ['React', 'Re: React', 'Re:Re: React'];
ReactDOM.render(
  <Mailbox unreadMessages={messages} />,
  document.getElementById('root')
);

-논리연산을 통해 if문을 대체하는 방안도 있음

 

render() {
  const isLoggedIn = this.state.isLoggedIn;
  return (
    <div>
      {isLoggedIn
        ? <LogoutButton onClick={this.handleLogoutClick} />
        : <LoginButton onClick={this.handleLoginClick} />
      }
    </div>
  );
}

- 이렇게 조건연산식으로도 if else문 구현 가능

 

function WarningBanner(props) {
  if (!props.warn) {
    return null;
  }

  return (
    <div className="warning">
      Warning!
    </div>
  );
}

class Page extends React.Component {
  constructor(props) {
    super(props);
    this.state = {showWarning: true};
    this.handleToggleClick = this.handleToggleClick.bind(this);
  }

  handleToggleClick() {
    this.setState(state => ({
      showWarning: !state.showWarning
    }));
  }

  render() {
    return (
      <div>
        <WarningBanner warn={this.state.showWarning} />
        <button onClick={this.handleToggleClick}>
          {this.state.showWarning ? 'Hide' : 'Show'}
        </button>
      </div>
    );
  }
}

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

-이렇게 렌더링을 막는 방법도 생각해볼만함

 


참고 : https://ko.reactjs.org/docs/lists-and-keys.html

 

const numbers = [1, 2, 3, 4, 5];
const listItems = numbers.map((numbers) =>
  <li>{numbers}</li>
);

ReactDOM.render(
  <ul>{listItems}</ul>,
  document.getElementById('root')
);

-여러개 컴포넌트 렌더링하기

const numbers = [1, 2, 3, 4, 5];
const listItems = numbers.map((number) =>
  <li key={number.toString()}>
    {number}
  </li>
);

const todoItems = todos.map((todo, index) =>
  // Only do this if items have no stable IDs
  <li key={index}>
    {todo.text}
  </li>
);

- key를사용할때는 이렇게 사용함

 

function ListItem(props) {
  const value = props.value;
  return (
    // 틀렸습니다! 여기에는 key를 지정할 필요가 없습니다.
    <li key={value.toString()}>
      {value}
    </li>
  );
}

function NumberList(props) {
  const numbers = props.numbers;
  const listItems = numbers.map((number) =>
    // 틀렸습니다! 여기에 key를 지정해야 합니다.
    <ListItem value={number} />
  );
  return (
    <ul>
      {listItems}
    </ul>
  );
}

const numbers = [1, 2, 3, 4, 5];
ReactDOM.render(
  <NumberList numbers={numbers} />,
  document.getElementById('root')
);

function ListItem(props) {
  // 맞습니다! 여기에는 key를 지정할 필요가 없습니다.
  return <li>{props.value}</li>;
}

function NumberList(props) {
  const numbers = props.numbers;
  const listItems = numbers.map((number) =>
    // 맞습니다! 배열 안에 key를 지정해야 합니다.
    <ListItem key={number.toString()} value={number} />
  );
  return (
    <ul>
      {listItems}
    </ul>
  );
}

const numbers = [1, 2, 3, 4, 5];
ReactDOM.render(
  <NumberList numbers={numbers} />,
  document.getElementById('root')
);

- Key 지정 방법을 헷갈리면 안됨. 어디에 지정할지 잘 생각

'일상 > React' 카테고리의 다른 글

React 공부 (with nico 4장)  (0) 2021.01.08
React 공부 (with nico 3장)  (0) 2021.01.07
React 공부 (with nico 2장)  (0) 2021.01.07
React 공부 (with nico 1장)  (0) 2021.01.06
React 공부 (with reactjs.org)  (0) 2021.01.05

참고 페이지 : https://ko.reactjs.org/docs/introducing-jsx.html

 

JSX 소개 – React

A JavaScript library for building user interfaces

ko.reactjs.org

 

function formatName(user) {
  return user.firstName + ' ' + user.lastName;
}

const user = {
  firstName: 'Harper',
  lastName: 'Perez'
};

const element = (
  <h1>
    Hello, {formatName(user)}!
  </h1>
   <div>
    <h1>Hello!</h1>
    <h2>Good to see you here.</h2>
  </div>
);

ReactDOM.render(
  element,
  document.getElementById('root')
);

-변수 선언 방식이 매우 자유로움

 

- Hello, {formatName(user)} 이걸 봐서는 함수리턴값을 {}로 감싸서 문자열로 만드는듯

 

- <div> 안에 또 <h1> 넣어도 무방함

 

const element = <div tabIndex="0"></div>;

const element = <img src={user.avatarUrl}></img>;

- 블럭(div)안에 인자로 tabIndex=0이라는 값을 넣어준듯

 

- 원래 블럭의 인자값 src에 {user.avatarUrl} 처럼 변수를 넣을 수 도 있음

 


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

 

Components and Props – React

A JavaScript library for building user interfaces

ko.reactjs.org

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

const element = <Welcome name="Sara" />;

-props는 객체인자를 받는 것임

 

-제일 밑에 줄 처럼 이제 컴포넌트를 블럭으로 받을 수 있음. 인자를 주면서

 

 

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

function App() {
  return (
    <div>
      <Welcome name="Sara" />
      <Welcome name="Cahal" />
      <Welcome name="Edite" />
    </div>
  );
}

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

- 함수형태로 나타내면 이렇게 됨

 

class Clock extends React.Component {
  constructor(props) {
    super(props);
    this.state = {date: new Date()};
  }

  componentDidMount() {
    this.timerID = setInterval(
      () => this.tick(),
      1000
    );
  }

  componentWillUnmount() {
    clearInterval(this.timerID);
  }

  tick() {
    this.setState({
      date: new Date()
    });
  }

  render() {
    return (
      <div>
        <h1>Hello, world!</h1>
        <h2>It is {this.state.date.toLocaleTimeString()}.</h2>
      </div>
    );
  }
}

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

- 이렇게 하면 이제 clock은 함수가 아닌 클래스로 정의됨. 그냥 이자체로 시간을 계속 업데이트함

 

- 생성자 형식 잘 보기, 이제 제일 밑에 것 처럼 실행시키면 됨

 

-componentDidMount는 컴포넌트 출력물이 DOM에 렌더링 된 후에 실행

 

-componentWillUnmount는 이제 끝날때 실행

 

 

// Wrong
this.setState({
  counter: this.state.counter + this.props.increment,
});

// Correct
this.setState((state, props) => ({
  counter: state.counter + props.increment
}));

// Correct
this.setState(function(state, props) {
  return {
    counter: state.counter + props.increment
  };
});

-setState 사용 방법

 


참고 : https://ko.reactjs.org/docs/handling-events.html

 

이벤트 처리하기 – React

A JavaScript library for building user interfaces

ko.reactjs.org

 

function ActionLink() {
  function handleClick(e) {
    e.preventDefault();
    console.log('The link was clicked.');
  }

  return (
    <a href="#" onClick={handleClick}>
      Click me
    </a>
  );
}

-event 함수를 이렇게 할 수 도 있음

'일상 > React' 카테고리의 다른 글

React 공부 (with nico 4장)  (0) 2021.01.08
React 공부 (with nico 3장)  (0) 2021.01.07
React 공부 (with nico 2장)  (0) 2021.01.07
React 공부 (with nico 1장)  (0) 2021.01.06
React 공부 (with reactjs.org 2)  (0) 2021.01.05

+ Recent posts