component3 React(12) state 전달하려면 상속을 많이 받아야 할 때 : Redux 목차 Redux 사용하기 세팅방법 보관하고 사용하기 리액트를 사용하다보면, 자연스레 컴포넌트들이 엄청나게 많아지고, 컴포넌트안의 컴포넌트안의 컴포넌트 . . . 등 엄청나게 많은 부모 자식관계를 형성하게 된다. 그럴때마다, props.props.props.props.name 이라고 state를 할 수는 없는 노릇이므로, Redux라는 편한 라이브러리 사용하는 법을 알아보자. Redux는 redux store.js라는 하나의 js파일에다가, 모든 state들을 보관해 놓을 수 있다. (html의 localStorage처럼) 하지만 모든 state들을 저장 해놓을 필요는 없고, 모든 컴포넌트에서 자주 사용하는 state만 저장해놓으면 된다. ( 예) 다이어트앱을 만든다고 가정했을 때, 몸무게 state) R.. 2023. 8. 5. React(4) 컴포넌트에게 state 값 전달하는방법 목차 1. props란 2. props사용법 3. 실습 props란 우선, 리액트도 여느 컴퓨터 언어들과 같이, 다른 함수(컴포넌트)안에서 선언된 변수(state)를, 다른 함수(컴포넌트)에서 사용하지 못한다. python의 변수사용 예 더보기 # python의 변수 사용 예 num1 = 1 # 변수 num1 초기화 def plusOne(): num2 = 2 # 변수 num2 초기화 num1 = num2 # "지역"변수 num1에 2를 할당 print("함수 안에서의 num1 : ",num1) # 출력 plusOne() # 함수 호출 print("함수 밖에서의 num1 : ",num1) # 출력 # 함수 안에서의 num1 : 2 # 함수 밖에서의 num1 : 1 C언어의 변수 사용 예 더보기 //c언어.. 2023. 6. 23. React(3) 컴포넌트로 동적인 UI 만들기(삼항연산식을 곁들인) 1. 컴포넌트에 대해 - 컴포넌트란? - 컴포넌트 사용법 - 갑자기 든 의문점 2. 동적인 UI 만들기 - 삼항연산식 글을 누르면 상세페이지(모달창)가 뜨게끔 하려고 한다! (완전히 페이지가 전환되는 것은 후에, router를 배우게 되면 할 것임) ※ 팝업창 VS 모달창 - 팝업창 : 현재 열려있는 브라우저 페이지에 또 다른 브라우저 페이지를 띄우는 것을 말한다. - 모달창 : 기존의 브라우저 페이지 위에 새로운 윈도우 창이 아닌, 레이어를 까는 것을 말한다 컴포넌트를 배운다면, 처음보는 사람도, 이라고 호출되는 것을 보고, "아, 모달창이구나!" 하며, 쉽게 알 수 있으니, 배워보도록 하자! 컴포넌트에 대해 🤷♂️ 컴포넌트란 ? 리액트로 만들어진 앱을 이루는 최소한의 단위로서, 보통 리액트로 만든 .. 2023. 6. 14. 이전 1 다음
