💻 코딩 일기 : [Spring] '모델에 여러 유형의 데이터 전달하기'

🔔 Spring MVC에서 모델에 여러 유형의 데이터 전달하기

모델에 다양한 데이터 유형을 전달하는 방법이 있습니다. 데이터 유형에는 HashMap, ArrayList, JavaBeans 등이 포함됩니다.

💟 활용 예제

🟦 HashMap<String, List>

@RequestMapping("sub1")
public void method1(Model model) {
    var data = new HashMap<String, List>();
    data.put("key1", List.of("java", "css"));
    data.put("key2", List.of("react", "vue"));
    data.put("key 삼", List.of("spring", "node"));
    model.addAttribute("myList", data);

    //view로 포워딩 (/WEB-INF/view/main10/sub1.jsp)
}

<%-- java와 css --%>
<p>${myList.key1[0]}와 ${myList.key1[1]}</p>

<%-- react와 vue --%>
<p>${myList.key2[0]}와 ${myList.key2[1]}</p>

<%-- spring와 node --%>
<p>${myList["key 삼"][0]}와 ${myList["key 삼"][1]}</p>

• HashMap을 사용하여 여러 개의 리스트를 모델에 추가하고, 이를 뷰에서 참조하여 출력합니다. 각 리스트는 고유한 키에 매핑되어 있으며, 뷰에서는 해당 키를 사용하여 리스트에 접근합니다.
• method1()에서는 HashMap을 생성하여 각 키에 대한 리스트를 추가한 후, "myList"라는 이름으로 모델에 추가합니다.
• 뷰에서는 각 리스트를 키를 사용하여 ${myList[key]} 형태로 참조할 수 있습니다.

🟦 HashMap<String, String>()

@RequestMapping("sub3")
public void method3(Model model) {
    var data = new HashMap<String, String>();
    data.put("흥민", "런던");
    data.put("민재", "뮌헨");
    data.put("강인", "파리");
    data.put("jh", "샌프란시스코");

    model.addAttribute("myAttr1", data);
    model.addAttribute("myAttr2", "흥민");
    model.addAttribute("myAttr3", "민재");
    model.addAttribute("jh", "강인");

}

<%-- 런던 --%>
<p>${myAttr1["흥민"]}</p>

<%-- 런던 --%>
<p>${myAttr1[myAttr2]}</p>

<%-- 뮌헨 --%>
<p>${myAttr1[myAttr3]}</p>
<p>${myAttr1["민재"]}</p>

<%-- 샌프란시스코 --%>
<p>${myAttr1.jh}</p>
<p>${myAttr1["jh"]}</p>

<%-- 파리 --%>
<p>${myAttr1[jh]}</p>

• HashMap을 사용하여 각 이름에 대한 소속 도시 정보를 추가하고 모델에 추가합니다.
• ${myAttr1[myAttr2]} : "myAttr2"라는 이름을 가리키는 키에 해당하는 값인 "흥민"의 소속 도시를 출력합니다.
• ${myAttr1[jh]} : "jh" 이름이 가리키는 키에 해당하는 값인 "강인"의 소속 도시(${myAttr1["강인"]})를 출력합니다.

🟦 ArrayList와 Map

@RequestMapping("sub4")
public void method4(Model model) {
    var data = new ArrayList<Map>();
    data.add(Map.of("son", "london", "lee", "paris"));
    data.add(Map.of("korea", "seoul", "uk", "london"));
    data.add(Map.of("부산", "해운대"));
    data.add(Map.of("서울", "강남"));

    model.addAttribute("list1", data);
    model.addAttribute("numbers1", 1);
    model.addAttribute("two", 2);
    model.addAttribute("three", "3");
    model.addAttribute("data1", "son");
    model.addAttribute("data2", "lee");
    
}

<%-- seoul --%>
<p>${list1[1].korea}</p>
<p>${list1[numbers1].korea}</p>

<%--해운대--%>
<p>${list1[2]["부산"]}</p>
<p>${list1[two]["부산"]}</p>

<%-- 강남 --%>
<p>${list1[3]["서울"]}</p>
<p>${list1[three]["서울"]}</p>
<p>${list1["3"]["서울"]}</p>
<%--Integer값이 아니더라도 인덱스 3을 가리킴--%>

<%-- london --%>
<p>${list1[0][data1]}</p>

<%-- paris --%>
<p>${list1[0][data2]}</p>

• ${list1["3"]["서울"]}
  jsp의 EL 특징 중 하나인 요청 파라미터가 문자열로 전달되는 경우에도 해당 문자열이 숫자로 해석되어 리스트나 맵의 인덱스로 사용될 수 있습니다.
  list1[3]["서울"]에서 "3"은 문자열로 해석되어 "3"이라는 키 값을 가지는 맵을 참조하고, 해당 맵에서 "서울"을 찾아 해당 값을 출력하게 됩니다.

🟦 EL의 속성 이름

@RequestMapping("sub5")
public void method5(Model model) {
    model.addAttribute("data", "값 1");
    model.addAttribute("데이타", "값 2");
    model.addAttribute("3", "삼");

}

<%-- 값 1 --%>
<p>${data}</p>
<p>${requestScope.data}</p>
<p>${requestScope["data"]}</p>

<%-- 에러  <p>${데이타} --%>
<%-- 값 1 --%>
<p>${requestScope["데이타"]}</p>

<%-- 3 출력 --%>
<%--<p>${3}</p>--%>

<%-- 삼 --%>
<p>${requestScope["3"]}</p>

• EL의 속성 이름은 알파벳, 숫자, 밑줄(_)로 제한되어 있지만 ${requestScope["데이터"]}와 같이 대괄호([]) 표기법을 사용하면 한글로 된 속성 이름을 인식할 수 있어 해당 속성 값을 가져올 수 있습니다.
• ${requestScope} : HTTP 요청에 대한 속성(attribute)을 저장하고 있습니다.

🟦 ArrayList와 JavaBeans>

public class MyBean101 {
    private String name;
    private String address;
    private int age;

    public String getName() {
        return name;
    }

    public void setName(String name) {
        this.name = name;
    }

    public String getAddress() {
        return address;
    }

    public void setAddress(String address) {
        this.address = address;
    }

    public int getAge() {
        return age;
    }

    public void setAge(int age) {
        this.age = age;
    }
}

@RequestMapping("sub6")
public void method6(Model model) {
    var data = new ArrayList<MyBean101>();
    MyBean101 e1 = new MyBean101();
    MyBean101 e2 = new MyBean101();
    MyBean101 e3 = new MyBean101();

    e1.setName("흥민");
    e1.setAge(18);
    e1.setAddress("런던");

    e2.setName("강인");
    e2.setAge(30);
    e2.setAddress("파리");

    e3.setName("정후");
    e3.setAge(40);
    e3.setAddress("샌프란시스코");

    data.add(e1);
    data.add(e2);
    data.add(e3);

    model.addAttribute("myList", data);
}

<p>
<ul>
    <%--흥민 18 런던--%>
    <li>${myList[0].name}</li>
    <li>${myList[0].age}</li>
    <li>${myList[0].address}</li>
</ul>
</p>
<p>
<ul>
    <%--강인 30 파리--%>
    <li>${myList[1].name}</li>
    <li>${myList[1].age}</li>
    <li>${myList[1].address}</li>
</ul>
</p>
<p>
<ul>
    <%--정후 40 샌프란시스코--%>
    <li>${myList[2].name}</li>
    <li>${myList[2].age}</li>
    <li>${myList[2].address}</li>
</ul>
</p>

• MyBean101 객체인 e1,e2,e3를 생성하여 ArrayList에 추가하면 모델에 "myList" 이름으로 추하고 있으며 모델에 추가된 데이터는 뷰에서 ${myList}로 참조할 수 있습니다.
• ${myList[0]}은 e1을 가리키고 ${myList[1]}은 e2를 가리키고 ${myList[2]}은 e3을 가리킵니다.

🟦 ArrayList와 JavaBeans 2

import java.util.List;

public class MyBeans104 {

    private String city;
    private List<String> foods;

    public String getCity() {
        return city;
    }

    public void setCity(String city) {
        this.city = city;
    }

    public List<String> getFoods() {
        return foods;
    }

    public void setFoods(List<String> foods) {
        this.foods = foods;
    }
}

@RequestMapping("sub9")
public void method10(Model model) {
    var data = new ArrayList<MyBeans104>();

    MyBeans104 e1 = new MyBeans104();
    MyBeans104 e2 = new MyBeans104();

    e1.setCity("한국");
    e1.setFoods(List.of("김치찌개", "된짱찌개", "순두부찌개"));

    e2.setCity("일본");
    e2.setFoods(List.of("돈까스", "우동", "규카츠"));

    data.add(e1);
    data.add(e2);

    model.addAttribute("data", data);
}

<h3>${data[0].city}</h3>
<ul>
    <li>${data[0].foods[0]}</li>
    <li>${data[0].foods[1]}</li>
    <li>${data[0].foods[2]}</li>
</ul>
<h3>${data[1].city}</h3>
<ul>
    <li>${data[1].foods[0]}</li>
    <li>${data[1].foods[1]}</li>
    <li>${data[1].foods[2]}</li>
</ul>

• method10()에서는 ArrayList<MyBeans104>를 생성하고, 각각의 객체에 도시와 음식 목록을 설정한 후 리스트에 추가합니다. 이 리스트를 모델에 "data"라는 이름으로 추가합니다.
• 뷰에서는 "data"라는 모델을 사용하여 각 객체의 도시와 음식 목록을 출력합니다. 도시는 ${data[index].city}로, 음식 목록은 ${data[index].foods[index]}로 참조됩니다.