오늘한일

https://www.youtube.com/watch?v=DLX62G4lc44&t=939s

https://scrimba.com/learn/learnreact/react-conditional-render-c4kJNSL

1. React 공부 (Sprint Recast 및 twittler 복습)
2. 유튜브 시청

오늘할 일

Build a Single Page Application with JavaScript (No Frameworks)

https://www.youtube.com/watch?v=6BozpmSjk-Y

App.js

import React from "react";
import TodoItem from "./TodoItem";
import todosData from "./todosData";

function App() {
  const todoItems = todosData.map((item) => (
    <TodoItem key={item.key} item={item} />
  ));

  todosData에 있는 data를 TodoItem에 있는 인자로 다 넘겨준다.그리고 이게 여러개이니까 맵을 쓰고 display는 한번에 해준다. key값을 넣어준다

  return <div className="todo-list">{todoItems}</div>;
}

export default App;

TodoItems.js

import React from "react";

function TodoItem(props) {
  return (
    <div className="todo-item">
      <input type="checkbox" checked={props.item.completed} />
      <p>{props.item.text}</p>
    </div>
  );
}

export default TodoItem;

https://reactjs.org/docs/events.html#supported-events

function을 props로 받기

import React from "react";

function handleClick() {
  console.log("I was clicked!");
}

function App() {
  return (
    <div>
      <img
        onMouseOver={() => console.log("Hovered!")}
        src="https://www.fillmurray.com/200/100"
      />
      <br />
      <br />
      <button onClick={handleClick}>Click me</button>
    </div>
  );
}

export default App;

Changing the state

import React from "react";

class App extends React.Component {
  constructor() {
    super();
    this.state = {
      count: 0,
    };
    this.handleClick = this.handleClick.bind(this);
  }

  handleClick() {
    this.setState((prevState) => {
      return {
        count: prevState.count + 1,
      };
    });
  }

  render() {
    return (
      <div>
        <h1>{this.state.count}</h1>
        <button onClick={this.handleClick}>Change!</button>
      </div>
    );
  }
}

export default App;

Hook

훅을 왜 쓰는지는 들었는데 잘모르겠는데

import React, { useState } from "react";

function App() {
  const [answer] = useState("Yes");

  return (
    <div>
      <h1>Is state important to know? {answer}</h1>
    </div>
  );
}

export default App;

이렇게 나온다.

import React, { useState } from "react";

function App() {
  const [count, setCount] = useState(0);

  function increment() {
    setCount((prevCount) => prevCount + 1);
  }
  return (
    <div>
      <h1>{count}</h1>
      <button onClick={increment}>Increment</button>
    </div>
  );
}

export default App;

import React from "react";
import TodoItem from "./TodoItem";
import todosData from "./todosData";

class App extends React.Component {
  constructor() {
    super();
    this.state = {
      todos: todosData,
    };
    this.handleChange = this.handleChange.bind(this);
  }

  handleChange(id) {
    this.setState((prevState) => {
      const updatedTodos = prevState.todos.map((todo) => {
        if (todo.id === id) {
          return {
            ...todo,
            completed: !todo.completed,
          };
        }
        return todo;
      });
      console.log(prevState.todos);
      console.log(updatedTodos);
      return {
        todos: updatedTodos,
      };
    });
  }

  render() {
    const todoItems = this.state.todos.map((item) => (
      <TodoItem key={item.id} item={item} handleChange={this.handleChange} />
    ));
    return <div className="todo-list">{todoItems}</div>;
  }
}

export default App;


css
div {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

h1 {
  font-size: 3em;
}

button {
  border: 1px solid lightgray;
  background-color: transparent;
  padding: 10px;
  border-radius: 4px;
}

button:hover {
  cursor: pointer;
}

button:focus {
  outline: 0;
}

라이프 사이클 하는데 무슨 소리를 하는건지 도대체 알아들을수가 없다...

유튜브에서 읽어보라고 추천해주었다.
https://engineering.musefind.com/react-lifecycle-methods-how-and-when-to-use-them-2111a1b692b1

import React, { Component } from "react";

// https://engineering.musefind.com/react-lifecycle-methods-how-and-when-to-use-them-2111a1b692b1
// https://reactjs.org/blog/2018/03/29/react-v-16-3.html#component-lifecycle-changes
class App extends Component {
  constructor() {
    super();
    this.stae = {};
  }

  static getDerivedStateFromProps(props, state) {
    // return the new, updated
  }

  getSnapshotBeforeUpdate() {
    // create a backup of the current way things are
  }

  // componentWillMount() {

  // }

  componentDidMount() {
    // Get the data I nedd to correctly
  }

  // componentWillReceiveProps(nextProps) {
  //   if (nextProps.whatever !== this.props.whatever) {
  //     // do something important here
  //   }
  // }

  shouldComponentUpdate(nextProps, nextState) {
    // return true if want it to update
    // return flase if not
  }

  // componentWillUpdate() {

  // }

  componentWillUnmout() {
    // remove event listener
    // teardown or cleanup your code befor your component disappears
  }

  render() {
    return <div>Code goes here</div>;
  }
}

export default App;

import React, { Component } from "react";
import randomcolor from "randomcolor";

class App extends Component {
  constructor() {
    super();
    this.state = {
      count: 0,
      color: "",
    };
    this.increment = this.increment.bind(this);
    this.decrement = this.decrement.bind(this);
  }

  increment() {
    this.setState((prevState) => {
      return {
        count: prevState.count + 1,
      };
    });
  }

  decrement() {
    this.setState((prevState) => {
      return {
        count: prevState.count - 1,
      };
    });
  }

  componentDidUpdate(prevProps, prevState) {
    if (prevState.count !== this.state.count) {
      const newColor = randomcolor();
      this.setState({ color: newColor });
    }
  }

  render() {
    return (
      <div>
        <h1 style={{ color: this.state.color }}>{this.state.count}</h1>
        <button onClick={this.increment}>Increment!</button>
        <button onClick={this.decrement}>Decrement!</button>
      </div>
    );
  }
}

export default App;

여기서는 componentDidUpdate를 사용해서 업데이트를 해줘야한다고 하는데 왜일까..

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

class App extends Component {
  constructor() {
    super();
    this.state = {
      isLoading: true,
    };
  }

  componentDidMount() {
    setTimeout(() => {
      this.setState({
        isLoading: false,
      });
    }, 1500);
  }

  render() {
    return (
      <div>
        <Conditional isLoading={this.state.isLoading} />
      </div>
    );
  }
}

export default App;

Conditional.js

import React from "react";

function Conditional(props) {
  /// condtion ? statement if ture : statement if false
  if (props.isLoading === true) {
    return <h1>Loading...</h1>;
  }
  return <h1>Some cool stuff about conditional rendering</h1>;
}

export default Conditional;

이거를 보면 된다.

근데 삼항 연산자를 쓴다.

import React from "react";

function Conditional(props) {
  /// condtion ? statement if ture : statement if false
  return (
    <div>
      <h1>Navbar</h1>
      {props.isLoading === true ? (
        <h1>Loading...</h1>
      ) : (
        <h1>Some cool stuff about conditional rendering</h1>
      )}
    </div>
  );
}

export default Conditional;