-
질문 & 답변
카테고리
-
세부 분야
프론트엔드
-
해결 여부
미해결
코드 한번만 봐주실수 있나요 ?
22.07.24 20:34 작성 조회수 117
0
- 학습 관련 질문을 남겨주세요. 상세히 작성하면 더 좋아요!
- 먼저 유사한 질문이 있었는지 검색해보세요.
- 서로 예의를 지키며 존중하는 문화를 만들어가요.
- 잠깐! 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요.
- 먼저 유사한 질문이 있었는지 검색해보세요.
- 서로 예의를 지키며 존중하는 문화를 만들어가요.
- 잠깐! 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요.
- 학습 관련 질문을 남겨주세요. 상세히 작성하면 더 좋아요!
- 먼저 유사한 질문이 있었는지 검색해보세요.
- 서로 예의를 지키며 존중하는 문화를 만들어가요.
- 잠깐! 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요.
- 먼저 유사한 질문이 있었는지 검색해보세요.
- 서로 예의를 지키며 존중하는 문화를 만들어가요.
- 잠깐! 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Anton&family=Edu+VIC+WA+NT+Beginner&family=Indie+Flower&family=Permanent+Marker&family=Shadows+Into+Light&display=swap" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/redux/4.0.1/redux.js"></script>
</head>
<body>
<style>
#Container{
border: 3px solid black;
display: flex;
justify-content: center;
align-items: center;
flex-wrap: wrap;
margin-top: 10px;
}
#Container div {
box-sizing: border-box;
border: 5px solid orange;
height:200px;
width:32%;
margin:5px;
padding: 20px;
font-size: 30px;
}
</style>
<div id="actionBox">
<input type="text" placeholder="Type anything">
<button onclick="clickMe()">Click Me!</button>
<button onclick="changeRadius(10)">Rounded</button>
<button onclick="changeRadius(15)">Circle!</button>
<button onclick="changeRadius(0)">Rectangle!</button>
<button onclick="changeColor('red')">Red!</button>
<button onclick="changeColor('green')">Green!</button>
<button onclick="changeColor('blue')">Blue!</button>
</div>
<div id="Container">
<div class="textBox" id="1"></div>
<div class="textBox" style="font-family:'Anton'" id="2"></div>
<div class="textBox" style="font-family:'Edu VIC WA NT Beginner'" id="3"></div>
<div class="textBox" style="font-family:'Indie Flower'" id="4"></div>
<div class="textBox" style="font-family:'Permanent Marker'" id="5"></div>
<div class="textBox" style="font-family:'Shadows Into Light'" id="6"></div>
</div>
<script>
let divs = document.querySelectorAll('.textBox')
function reducer(state, action) {
console.log(state, action);
if (state === undefined) {
return { color: 'orange' }
}
var newState;
if (action.type === 'CHANGE_COLOR') {
return{
...state,
color: action.color
}
}
else if (action.type === 'CHANGE_TEXT'){
return{
...state,
text: action.text
}
}
else if (action.type === 'CHANGE_RADIUS'){
return{
...state,
radius: action.radius
}
}
}
var store = Redux.createStore(
reducer,
window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__()
);
function clickMe(){
let text = document.querySelector('input')
store.dispatch({type:'CHANGE_TEXT', text:`${text.value}`})
var state = store.getState();
divs.forEach((e) => {
e.innerText = `${state.text}`
})
text.value = "";
}
function changeColor(e){
store.dispatch({type:'CHANGE_COLOR', color:e})
var state = store.getState();
divs.forEach((e) => {
e.style.border = ` 5px solid ${state.color}`
})
}
function changeRadius(r){
store.dispatch({type:'CHANGE_RADIUS', radius:r})
var state = store.getState();
divs.forEach((e) => {
e.style.borderRadius = `${state.radius}px`
})
}
</script>
</body>
</html>
이런식으로 onclick 시 함수 호출하면서 값을 전달해주고, 함수내에서 dispatch를 실행하고 foreach로 속성바꿔주는 식으로 했는데, 꼭 onclick할때 dispatch를 해줘야하는건가요 ? 이런식으로 하니까, subscribe는 필요없는거같아서요. 아마 일괄적으로 바꿔주는 방식이라서 제가 이렇게 가능했던거 같은데, 개별적으로 값을 바꿔주는 과제였다면 좀 달라졌을까요?
답변을 작성해보세요.
0
Hojun Lee
지식공유자2022.07.25
지금 주신 코드를 살펴보았는데요.
1. '작동하는가?'에 대해 초점이 맞춰져 있으시다면 지금 주신 코드처럼 바닐라로 짜셔도 됩니다. :)
div에 forEach를 돌리는 방식은 바닐라 방식이죠.
꼭 이게 옳으니 이렇게 짜라라기 보다는 프로젝트 규모에 따라 부하가 발생되지 않는 방식을 선택하시면 됩니다.
2. 다만 리덕스를 사용하는 이유는 '작동하는가'가 아닌 '복잡성을 해소할 수 있는가'입니다.
이 프로젝트에서는 그만큼에 복잡도가 없으니 말씀 주신 것처럼 짜셔도 동작도 하고 복잡도도 올라가지 않습니다.
다만 수천개의 컴포넌트가 있고, 상태관리도 수백개를 해야 한다면 고려하셔야 할 기술입니다.
배우는 과정에 있는 코드라 '이렇게 복잡성을 해소할 수 있다'의 초점으로 접근해주시면 좋을 것 같습니다.
감사합니다.
답변 1