Context APIインタビュー-3

(これは以前に発表された後続の内容です)

🔥 入る前に。

以前にパブリッシュしたコンテキストを作成および変更することによって、変更をサブノードに適用する方法について説明しました.
しかし、大量のデータがcontextに入ったらどうしますか?もちろん複雑になりますが、すぐに開発者の混乱を招きます...これはすぐに低品質の結果をもたらします...
そこで、複数のコンテキストを作成したり、サブノードからコンテキストにアクセスしたり、変更したりする機能を追加してみます.
シングルラインサマリー👉 掲示板を作ります

1」複数の倉庫の作成とアクセス

👇 まず、AutheContextを再作成します.

// AuthContext.js 

export const AuthContext = createContext(); // ThemeContext 외의 다른 context 생성.

function AuthContextProvider (props) {
    const [state,setState] = useState({
        isAuthenticated: false 
    })
    // 기본값 설정
    const toggleAuth = () =>{
        setState({isAuthenticated : !state.isAuthenticated})
    }
	// 수정 함수 작성
    return(
        <AuthContext.Provider value={{...state,toggleAuth: toggleAuth}}> // 값 넘겨줌
            {props.children} // 모든 자식에게 이용권한 줌.
        </AuthContext.Provider>
    )
}

export default AuthContextProvider

👇 次のように、アプリケーションが作成した新しいコンテキストです.

//App.js

function App() {
  return (
    <div className="App">
      <ThemeContextProvider>
        
        <AuthContextProvider>

          <Navbar />
          <ThemeToggle/>

        </AuthContextProvider>
        
      </ThemeContextProvider>
    </div>
  );
}

👇 サブノードには、以前の転送方式と同じ2つのアクセス方式があります.useContextまたはConsumerを使用...次のコードはConsumerを使用してアクセスします.

// Navbar.js
...

function Navbar () {
    return (
    //요로코롬 마치 2중 for문을 연상 시키듯이 해줌..
    
      <AuthContext.Consumer>{(authContext) => (
        <ThemeContext.Consumer>{(context) =>{
          const { isAuthenticated , toggleAuth} = authContext
          const { isLightTheme, light, dark } = context;
          const theme = isLightTheme ? light : dark;
          return(
            <nav style={{background: theme.ui, color: theme.syntax }}>
              <h1>Context App</h1>
              <div onClick ={toggleAuth}>
                {isAuthenticated ? 'Logged in' : 'Logged out '}
              </div>
              <ul>
                <li>Home</li>
                <li>About</li>
                <li>Contact</li>
              </ul>
            </nav>
          )
        }}
        </ThemeContext.Consumer>
      )}
      </AuthContext.Consumer>
    );

}

export default Navbar;

2枚の掲示板を作成する

👇 掲示板として新しいBookContextを作成

//BookContex.Js

import uuid from 'uuid/v1'

export const BookContext = createContext();

function BookContextProvider(props) {
    const [books, setBooks] = useState([
        {title: 'name of the wind', author:'patrick rothfuss',id: 1},
        {title: 'the way of kings', author:'brandon sanderson', id: 2},
    ])

    const addBook = (title,author) =>{
        setBooks([...books,{title,author, id: uuid() }])
    }
    // book 정보를 추가 시켜줌 ( add )

    const removeBook = (id) =>{
        setBooks(books.filter(book => book.id !== id))
    }
	// book 정보를 삭제해줌 ( del )
    return(
        <BookContext.Provider value ={{books, addBook, removeBook}}>
            {props.children}
        </BookContext.Provider>
    )
}

export default BookContextProvider

👇 BookContextの値を表示

// BookList

function BookList () { 
  const {isLightTheme , light, dark} = useContext(ThemeContext)
  const { books } = useContext(BookContext)
  const theme = isLightTheme ? light : dark;

    return books.length ? ( 
      <div className="book-list" style={{color : theme.syntax, background : theme.bg}}>
        <ul>
          {books.map(book =>{
            return(
              <BookDetails book={book} key = {book.id}/>    
            )
          })}
        </ul>
      </div>
    ) : (
      <div className ="empty">
          No books to read. Hello free time :) 
      </div>
    );
}

👇 BookContext値表示

// BookDetails
function BookDetails ({book}) {
    const {removeBook} = useContext(BookContext)

    return(
    <li onClick ={() => removeBook(book.id)}>
        <div className ="title"><h4> - {book.title}</h4></div>
        <div className ="author">{book.author}</div>
    </li>)
}

export default BookDetails

👇 Bookを追加する構成部品の作成

// NewBookForm 
function NewBookForm() {
    const {addBook} = useContext(BookContext);
    const [title,setTitle] = useState(''); 
    const [author,setAuthor] = useState('');
    
    const handleSubmit = (e) =>{
        e.preventDefault()
        addBook(title,author); // 컨텍스트에 book 추가해줌
        setTitle(''); // 초기화
        setAuthor(''); // 초기화
    }
    return(
        <form onSubmit={handleSubmit}>
            <input type="text" placeholder="book title" value={title} onChange={(e) => setTitle(e.target.value)} required/>
            <input type="text" placeholder="book author" value={author} onChange={(e) => setAuthor(e.target.value)} required/>
            <input type="submit" value="add book" />
        </form>
    );
}

👇 みんな集まって

function App() {
  return (
    <div className="App">
      <ThemeContextProvider>
        
        <AuthContextProvider>

          <Navbar />
          <BookContextProvider>
            <BookList />
            <NewBookForm/>
          </BookContextProvider>
          <ThemeToggle/>

        </AuthContextProvider>
        
      </ThemeContextProvider>
    </div>
  );
}

3愈愈愈结果

👇 もとの姿

👇 アイテムを選択すると、


👇 新刊書を追加