자바스크립트의 sync / async 자바스크립트는 일방적으로 동기방식이다. 윗줄부터 차례로 코드가 실행 된다. 하지만 sync / async 함수를 사용하면 비동기적으로 코드실행이 가능하다. 순차적 실행이 아닌, 완료되면 실행이 된다. (ajax, 이벤트리스너, setTimeout 이런 함수들을 쓸 때 그런 현상이 일어남) 예를들어 console.log(1+1) axios로 get요청하고나서 console.log(1+2) 실행해주셈 console.log(1+3) 이럴 경우에는 2, 4, 3 이 순서대로 출력이 된다. 3을 출력하는 코드가 asynchronous 처리를 지원하는 코드인데, 3을 출력할 때 오래걸리면 완료될 때 까지 잠깐 보류했다가 다른 코드를 먼저 실행시킨다는 소리이다. 심지어 ajax요..
평균은 넘겠지 문제 대학생 새내기들의 90%는 자신이 반에서 평균은 넘는다고 생각한다. 당신은 그들에게 슬픈 진실을 알려줘야 한다. 입력 첫째 줄에는 테스트 케이스의 개수 C가 주어진다. 둘째 줄부터 각 테스트 케이스마다 학생의 수 N(1 ≤ N ≤ 1000, N은 정수)이 첫 수로 주어지고, 이어서 N명의 점수가 주어진다. 점수는 0보다 크거나 같고, 100보다 작거나 같은 정수이다. 출력 각 케이스마다 한 줄씩 평균을 넘는 학생들의 비율을 반올림하여 소수점 셋째 자리까지 출력한다. 예제 입력 1 복사 5 5 50 50 70 80 100 7 100 95 90 80 70 60 50 3 70 90 80 3 70 90 81 9 100 99 98 97 96 95 94 93 91 예제 출력 1 복사 40.000..
1. 컴포넌트 안에서 쓰는 if/else function Component() { if ( true ) { return 참이면 보여줄 HTML; } else { return null; } } JSX를 조건부로 보여주고 싶을때 사용 우리가 자주 쓰던 자바스크립트 if문은 return () 안의 JSX 내에서는 사용 불가능 if (어쩌구) {저쩌구} 이게 안되므로. return + JSX 전체를 퉤 뱉는 if문을 작성해서 사용! function Component() { if ( true ) { return 참이면 보여줄 HTML; } return null; } else 생략이 가능 2. JSX안에서 쓰는 삼항연산자 =ternary operator 조건문 ? 조건문 참일때 실행할 코드 : 거짓일 때 실행할 코..
메인페이지 누르면 페이지 이동시키기 { history.push('/detail/0') }} /> 이렇게 해도 실행이 되지 않는다. 이유는 는 div가 아니기 때문에 onClick은 속성을 달아도 동작하지 않을 수 있다. 컴포넌트를 정의한 곳으로 가서 div에 직접 onClick을 달아주시면 문제 해결 function Contents(props) { let inventory = useContext(inventoryContext); let history = useHistory(); return ( { history.push("/detail/" + props.sticker.id); }} > 어쩌구 ); } /detail 뒷부분에 props.sticker.id로 동적으로 수정 장바구니 페이지 +/- 버튼 완성하..
지난 시간에는 redux를 저장하고 사용하는 방법을 알아봤다. 이번시간에는 수정하는 방법을 알아보자! redux를 사용하면서 state 데이터를 수정하고 싶을 때는 reducer 함수를 만들고 그곳에 데이터 수정하는 방법을 정의 원하는 곳에서 dispatch() 라는 함수를 써서 reducer에게 수정해달라고 요청 장바구니 품목에 + / - 버튼 만들기 (Cart.js) function Cart(props){ return ( # 상품명 수량 변경 { props.state.map((a,i)=>{ return ( {a.id} {a.name} {a.quan} { ??? }}> + ) }) } ) } map 반복문을 적용해서 장바구니 항목이 여러개면 을 여러개 생성 reducer 만들기 reducer는 func..
Redux 라이브러리? 모든 컴포넌트 , 파일 끼리 같은 값을 공유할수 있는 저장공간 생성 가능 Context API와 같지만 , 추가로 데이터 관리 기능을 제공한다. Redux사용 이유 - props 전송 없이도 모든 컴포넌트들이 state를 사용할 수 있게 만들어준다. 데이터를 보관하기 위한 redux 설치/셋팅 yarn add redux react-redux npm install redux react-redux redux를 사용하기 위해선 두개의 라이브러리( redux, react-redux) 설치! redux : 데이터를 엄격하게 관리하는 기능 react-redux : 리덕스를 리액트에서 쓸 수 있게 도와주는 기능을 제공 (index.js) import {Provider} from 'react-r..
이번시간에는 Tab 기능을 만들어 볼 것이다. 탭 만들기 탭 디자인은 react-bootstrap 홈페이지에서 Base Nav를 사용하였다. 그리고 각각 탭을 누르면 로 몇번째 탭을 눌렀는지 state에 저장한 후 state에 따라 보여준다. 즉 이런 원리이다. state가 0이면 0번 div를 보여줌 state가 1이면 1번 div를 보여줌 UI의 상태를 저장할 state를 만들어 준다. (Detail.js) function Detail(){ let [누른탭, 누른탭변경] = useState(0); return ( { 누른탭변경(0) }}>Active { 누른탭변경(1) }}>Option 2 내용0 내용1 내용2 ) } 이제 if문으로 state의 현재상태에 따라 UI를 보여주면 된다. 하지만 문제는 ..
지난 시간 컴포넌트 안의 컴포넌트 이렇게 중첩이 되어있으면 매우 복잡해진다. 따라서 조금 더 쉽게 구현할 수 있는 Context API문법을 이용할 것이다. Context API ? 리액트 내장 문법으로 모든 하위 컴포넌트들이 props 없이도 state(부모 값을) 사용가능하게 만들어주는 문법 Context 문법을 이용해 props없이 state 전송하기 App() 컴포넌트 밖에다가 코딩 (App.js) let 재고context = React.createContext(); function App(){ let [재고, 재고변경] = useState([10,11,12]); return ( ) } createContext()라는 함수를 이용해 변수 생성. 변수는 바로 특별한 가 된다! (App.js) let..