반응형 Framework43 React Context API 처음만난 리액트 강의에서 발췌한 내용입니다. 컴포넌트의 props를 통한 데이터 전달 기존에 일반적인 react application은 데이터가 컴포넌트의 props를 통해 부모가 자식에게 단방향으로 전달이되었다. 로그인여부, 프로필 정보등을 전달하려면 반복적이고 지저분한 코드가 많이 생성된다. 이렇게 여러 컴포넌트에 걸쳐 자주 사용하는 데이터의 경우 코드의 복잡함 등을 해소시켜 주기위해 사용할 수 있는것이 context이다. Context는 리액트 컴포넌트들 사이에서 데이터를 기존의 props로 전달하는대신 컴포넌트 트리를 통해 곧바로 컴포넌트로 전달해 어떤 컴포넌트던 데이터에 쉽게 접근할 수 있다. 코드를 한 곳에서 관리하기때문에 디버깅에도 유리하다. [언제 context를 사용해야할까?] 로그인 여.. 2022. 10. 12. conditional rendering 어떠한 조건에 따라서 렌더링이 달라질 때 자주 쓰이기 때문에사용 방법과 원리에 대해서 잘 이해하고 넘어가야한다. truthy falsy boolean 자료형 true / false true는 아니지만 true로 여겨지는 값: truthy {} : empty object [] : empty array number : not zero "0", "false" : String, not empty false는 아니지만 false로 여겨지는 값 : falsy false 0, -0 : zero, minus zero '', "", `` : empty string null undefined NaN Element Variables (엘리먼트 변수) 렌더링 해야할 컴포넌트를 변수처럼 다루고 싶을 때 사용한다. import .. 2022. 10. 11. 리액트에서 setState는 비동기로 동작 ?? setState는 비동기로 동작하는 것을 간과하지 못한 채 코드를 짜게 되면서 깊은 늪에 빠지게 됐다. 이 실수는 초보자라면 당연히 맞닿을 수 있는 일인데 해결 방법을 누가 딱딱 알려주면 얼마나 좋을까!!! 하여튼.. 깊게 공부하지 않았던 나의 미스텤... 이러한 실수를 범하고 있는 꽤 많은(?) 아니 초급자.. 분들께 좋은 피드가 됐으면 좋겠다... 🌻state state는 상태 변화값을 보여준다. 부모 컴포넌트에서 자식 컴포넌트로 데이터를 내보내는것이 아닌 해당 컴포넌트 내부에서 데이터를 전달한다. 함수 내부에서 선언되어 사용되는 변수 처럼 컴포넌트 내부에서 사용이 가능하다. state는 변경 가능한 자바스크립트 객체이며 state의 상태가 변하면 re-randering된다. ex) 검색 창에 글을 .. 2022. 10. 3. React TodoList 만들기 * style 컴포넌트: tailwindcss Tailwind CSS - Rapidly build modern websites without ever leaving your HTML. Documentation for the Tailwind CSS framework. tailwindcss.com 🔷[App.js] //App.js function App() { const [value, setValue] = useState('') const [todoData, setTodoData] = useState([]) const handleSubmit = (e) => { e.preventDefault() // 새로운 할 일 데이터 const newTodo = { id: Date.now(), //현재 date값 titl.. 2022. 10. 3. 이전 1 ··· 7 8 9 10 11 다음 728x90 반응형
